Payload extraction support

In Nuxt 2, we introduced a major enhancement to static generation referred to as Full Static Generation inspired by DreaMinder/nuxt-payload-extractor. You can read more about the history of initial decisions in nuxt/rfcs#22 which finally landed by https://github.com/nuxt/nuxt.js/pull/6159 in 2.13.0 and being available by opt-in option target: 'static'.

In Nuxt 3, thanks to nitro we can move payload extraction to the next level to not only support it for a static generation but also the hybrid static mode and even prefetching payload of server-rendered components. We initially tested this enhanced functionality using Nuxt bridge (src) and @danielroe made a POC in danielroe/nuxt-full-static for Nuxt 3 userland implementation.

Using this issue to track the progress of the core implementation roadmap.

• Initial support (#6455)
• Integrate with NuxtLink to prefetch payload of next pages (https://github.com/nuxt/framework/pull/4329)
• Version change detection on new deployment to reload the page (#6648)

Needs route rules:

• Payload prefetching with hybrid rendering
• Identical behavior for development mode

[oezkancodes]

How do we push payloads before generating the routes? Currently, nitro.prerender.routes is only an Array of strings. In Nuxt 2 we could push the payload inside generate.routes combined with the path of the route. So we could get blazing fast site generation. I couldn’t find any documentation for this feature in Nuxt 3. Would be very nice to know more about the implementation of Full Static Generation in Nuxt 3.

[DreaMinder]

Nice! It’s heartwarming to see a reference to the project I made years ago, haha 😃

Off-topic

There’s one crucial thing missing though - passing payload data to all the fetch methods on build time for building dynamic pages. This is a must-have for me since I’m working on a project with > 1000 pages. I’m not even trying to make a feat-request, since it seems like it would be much harder for you guys to implement in Nuxt 3.

Here’s how I’m going to solve this issue if anyone’s wondering (it’s not in prod yet):

1. On build time, in a module, I’m fetching data from all data sources and saving it into runtimeConfig. Also overriding ‘generate.routes’ array.
2. There’s server/api/pages.ts file which makes a simple query runtimeConfig.pages.find(... and returns a single array element. Netlify deploys this file as a cloud function, which should work reliably and fast enough since it only returns in-memory data hardcoded in build time. Also, this data is immutable and tied to a specific build.
3. In a specific component, I’m fetching data from this /api/pages endpoint. But still, maybe it should fetch from CMS directly in dev mode, otherwise npm run dev takes more time to start. WIP.