PR discussion: Incremental Builds by adding additional hooks

[HelloAlexPan]

Many people running the JAMstack on large sites require faster builds.

However, in Nuxt 2, currently the static site directory structure is not compatible with incremental builds as it contains the timestamp in the pathname of URL, e.g.:

https://example.com/_nuxt/static/123456789/path/of/route/payload.js

The path is hardcoded in vue-renderer.

To implement incremental builds, the user needs to change it to a more friendly format:

https://example.com/_nuxt/static/path/of/route/payload.js?v=1234567789

Describe the solution you'd like

We've already created a solution to this that we want to PR, where we add hooks so that users can modify payloadPath and payloadUrl

const payloadPath = urlJoin(url, 'payload.js')
const payloadUrl = urlJoin(staticAssetsBase, payloadPath)
const payload = { path: payloadPath, url: payloadUrl }
await this.serverContext.nuxt.callHook('vue-renderer:ssr:payloadPath', payload)

And as well as the path for state.js

Would love any feedback from the community before we make the PR!

[pi0]

Hi @HelloAlexPan. You can actually disable payload versioning but also ensure that .nuxt/static has not long term caching headers: (there are couple of more options) available)

export default {
 // Generates assets to `_nuxt/static/_/path/of/route/payload.js`
 generate: { staticAssets: { version: '_' } }
}

[HelloAlexPan]

Hey @pi0, thanks for that suggestion. I was wondering if you could lend me your time so I could discuss the following two points with you:

Your proposed solution removes the timestamp. However, without it the user cannot get the correct version.

With versioning, we can ensure that the user always gets the correct payload.js without worrying about CDN cache settings. This is necessary as there are many CDN providers who do not provide the necessary flexibility to use the suggested solution, and moreover, these settings may not be as reliable as the solution proposed in this issue.

Additionally, disabling payload versioning is an undocumented approach and without documentation, the community can't be confident that it is safe to use.

By adding hooks, this has very minimal influence on the core structure of nuxt, whilst solving both issues above.

Would you like us to open our PR so you can look into our proposed solution in more detail?

[pi0]

PR for adding hook certainly welcome and nice addition! But I'm afraid it is no more official than an undocumented workaround with hooks. We could add a built-in generate option as well simply moving version from path to a query parameter. (runtime code also needs this in several places)

[HelloAlexPan]

Awesome, thanks @pi0 done! Would love to hear more about the built in generate option as well — what we do would be heavily influenced by this and we'd love to help out where we can

[danielroe]

We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. I'm closing this issue as it's marked as a Nuxt 2 related enhancement and it's not a critical issue.

That doesn't mean it might not be relevant for Nuxt 3. If it is, please feel free to open a new issue (or just comment, and I can reopen it). 🙏

Thank you for your understanding and for your contribution to Nuxt! 🎉