Payload extraction support

[pi0]

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.

• [x] Initial support (#6455)
• [x] 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

[gkweb]

@danielroe @pi0 - Is this something that will be added to bridge?

[pi0]

@gkweb Actually it is already added in bridge and we started experimenting this feature first with Nuxt 2 infra. Only URLs are little bit different for Bridge renderer to be compatible with Nuxt 2 payload URLs. But I don't see no issue to backport new format as well to bridge and adopting for new output 👍🏼

[gkweb]

@gkweb Actually it is already added in bridge

Excellent! Thanks @pi0

[KahrLu]

@danielroe ,So the problem in https://github.com/nuxt/framework/issues/6639 is a serious problem that appears on the line. Is there a rude way to temporarily fix the problems we face while we pay attention to this roadmap?

[pi0]

@KahrLu You are right. We might improve this earlier for chunk not found issues. I've made #6648 to track.

[kemalcany]

Would it be possible to disable this feature from nuxt.config.ts (or somewhere else)?

Motivation: nuxt generate (or static generation) is also used when developing Capacitor / Cordova apps (where server / ssr is not needed). But since the output dist will be used in an app (where payloads are dynamic, probably behind authentication) static payload is not needed / causes issues.

[pi0]

@kemalcany This feature is only usable when SSR is enabled. With ssr: false no payload extraction should happen (please try edge-channel we had some bug fixes regarding this)

BTW also adding new experimental flag to disable for (ssr enabled) deployments https://github.com/nuxt/framework/pull/7588

[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.

[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.

[dimasxp]

how to deal with a caching strategy for all generated payloads.js for each page? they don't have unique hashes

[kilobyte2007]

Same question as @dimasxp, any way to add unique hashes to the payloads or at least inline the payload so it's not cached?

[pi0]

@dimasxp @kilobyte2007 You should apply same caching strategy of routes to payload routes in CDN configuration. If /blog/article/123 is set to be cached with a TTL of 1 minute, /blog/article/123/__payload.js should have the same caching strategy.

Only apply permanent caches for /_nuxt/* paths because there are hashed.

[TheAlexLichter]

It'd be nice to have the option to extract payloads only for e.g. static routes and and maybe swr routes temporarly 🤔