Nuxt•4mo ago

how to generate static HTML pages just for some of the routes

I'm trying to generate 4 static HTML pages from a huge list of routes that the app has But I only see info for pre-render and a nuxi command (nuxi generate) also for pre-render and not for pure static HTML. One note, 99,99% of the routes I fetch from the server, and doing that using the pages:extended hook as it contains async requests and it was the only way I found to avoid the "double request" (server and then on the client) Thanks

7 Replies

Victor Neves•4mo ago

Is this the right way (at nuxt config)?

nitro: {
    prerender: {
        routes: ['/update-browser', '/server-error'],
    }
}

nitro: {
    prerender: {
        routes: ['/update-browser', '/server-error'],
    }
}

If yes, and not having these routes set as files inside the pages folder, but having the routes fetched from the server and using the pages:extended hook to generate the routes/pages when trying to generate the static HTML pages, the routes will be available?

hooks: {
    'pages:extend': async (pages) => {
        await getRoutes(pages);
    }
}

hooks: {
    'pages:extend': async (pages) => {
        await getRoutes(pages);
    }
}

getRoutes()

export async function getRoutes(pages: NuxtPage[]) {
    let routes: Array<IAppRoute> = [];

    // The rest of the logic

    const list = [...systemRoutes, ...routes];

    list.forEach((route) => {
        pages.push(cloneDeep(route));
    });

    return pages;
}

export async function getRoutes(pages: NuxtPage[]) {
    let routes: Array<IAppRoute> = [];

    // The rest of the logic

    const list = [...systemRoutes, ...routes];

    list.forEach((route) => {
        pages.push(cloneDeep(route));
    });

    return pages;
}

no one?

manniL•4mo ago

you'd use the field you've set + nuxt build that should prerender the routes as expected

Victor Neves•4mo ago

@manniL / TheAlexLichter thanks for the feedback. currently, I'm facing some challenges. In my initial implementation, I was using the router.options to manage the routes, so I added all related files inside app folder as described on the docs https://nuxt.com/docs/guide/going-further/custom-routing#router-options But having it this way, since I can't use the useFetch or useAsyncData composables to avoid having the requests on the server and then on the client, I refactor the implementation to call the function inside the pages:extended hook at nuxt config After some tests, I saw that this way when generating static HTML only the markup from the template gets generated, but using my previous implementation, I get the full HTML Long story short, to avoid the double request (server and client) I'm not able to generate the full HTML, but I need both both things 😕

Nuxt

Custom Routing · Nuxt Advanced

In Nuxt 3, your routing is defined by the structure of your files inside the pages directory. However, since it uses vue-router under the hood, Nuxt offers you several ways to add custom routes in your project.

Victor Neves•4mo ago

@manniL / TheAlexLichter Can I suggest a video for your Nuxt series? "How to manage async server routes" 😅 From what I see I think there are some limitations in this area as we can't even handle them as a plugin to use the useFetch or useAsyncData cause Nuxt doesn't wait for the promise to get resolved 😦

manniL•4mo ago

what limitations exactly?

Victor Neves•4mo ago

One is creating a plugin to manage the async requests to get the list of routes from the server, the promise doesn't get resolved From what I see, I don't think it's related to my implementation as I already saw someone reporting an issue related to this https://github.com/nuxt/nuxt/issues/23678 The other 2 ways that I did were: - Using the router options (https://nuxt.com/docs/guide/going-further/custom-routing#router-options) I'm not able to use the composables, and with that, I ended up the double request, but able to fully generate plain static HTML pages - Having the code as util, using a regular fetch, and then using the pages:extended hook, I was able to prevent the double request, but not able to fully generate plain static HTML pages

GitHub

Asynchronously adding routes at runtime doesn't work reliably · Iss...

Environment Applies to any environment. Reproduction uses Nuxt 3.7.4. Reproduction https://stackblitz.com/edit/github-wyjpmc?file=app.vue Setup Two pages exist: pages/index.vue with name home and p...

Nuxt

Custom Routing · Nuxt Advanced

Victor Neves•4mo ago

My bad 😕 After debugging I found a file that I forgot to refactor It was still using the component key instead of the file key But now I'm wondering what the difference on handling the routes as pages vs the "traditional" routes list, cause I saw that the generated server.mjs file increased from ~150kB to ~2MB

Gaming

Programming

how to generate static HTML pages just for some of the routes