SSG without _payload.json files

[septatrix]

Hey everyone, I am trying to use Nuxt as a SSG and the majority (77%) of the final output size is due to _payload.json file in the final build. This is a problem as I am reaching the storage limit of github pages.

Based on my research the files seem to be for useFetch but as my site is fully static and does not use that data I have no need for it. Simply deleting the files, however, leads to errors as now fetch fails.

What I considered so far:

• I also read that it might be possible to reduce the size of these files by using the pick option though that is way too cumbersome if I want to implement this all over the place and does not work that well for nested objects.
• Furthermore some of these files are duplicated as they seem to be stored for each and every page and not once for every endpoint called. So one way to reduce the size is to get rid of the duplicates and symlink these files though that is far from ideal and a PITA to automate.
• Switching to AstroJS. Astro seems to properly bake the generated files and does not depend on any kind of _payload.json files. However, that would mean rewriting several days of work - doable but I would like to avoid doing so.

Things which might be possible but I do not know enough about them:

• Maybe some of the options to useFetch would prevent it from trying to fetch new data on static sites?
• Play around with <ClientIsland>. This seems to be quite new to Nuxt, however, I do not quite understand how to apply it, yet, and currently do not have the disposable time to play around with it.

[danielroe]

You can disable payload extraction like this:

export default defineNuxtConfig({
  experimental: {
    payloadExtraction: false
  }
})

But yes, you definitely should not store more data in a payload than needed - please use pick or transform to ensure that you are only storing the data required to render a page.

[septatrix]

I assume the experimental option sharedPrerenderData should also be usable in my situation? (It seems like there is little documentation of the prerender/payload functionality.)

But yes, you definitely should not store more data in a payload than needed - please use pick or transform to ensure that you are only storing the data required to render a page.

While this is certainly possible it is currently not worth the effort as the data structure is quite complex. Furthermore this would mean that changes in a child component allowing it to consume more keys would result in having to change the fetch calls everywhere this component is used.

[septatrix]

You can disable payload extraction like this

This seems to just embed it inside the page itself so does not reduce the size. What I actually want seem to be server components/pages.

[septatrix]

Having the payloads extracted and then removing them seems to be fine. I also had to remove _nuxt/builds/meta/<some uuid>.json and then it seemed to work fine...

[septatrix]

Not strictly related but for anyone who also tries to minimize the output size: #21821 currently results in significantly larger outputs if one has a lot of small pages