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

10 messages · Page 1 of 1 (latest)

buoyant umbra
#

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

buoyant umbra
#

Is this the right way (at nuxt config)?

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);
    }
}

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;
}
buoyant umbra
#

no one?

#

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

civic topaz
#

you'd use the field you've set + nuxt build

#

that should prerender the routes as expected

buoyant umbra
#

@civic topaz
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

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.

buoyant umbra
#

@civic topaz

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 😦

buoyant umbra
# civic topaz what limitations exactly?

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

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

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.