[nuxt] Cannot load payload /_payload.json

[fathom garden]

I just created a brand new Nuxt project using npx nuxi@latest init. I set up routing by adding <NuxtPage /> to app.vue and creating pages/index.vue. Then I made a static export using npm run generate and finally I serve it using npx serve .output/public.

I am getting the following error in my browser's console:

[nuxt] Cannot load payload  /hello/_payload.json SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Why is Nuxt is trying to load a non-existent JSON file? Did I find a bug already? 😬

[fathom garden]

Works fine using Nuxt 3.6.1. Possibly related to this: https://github.com/nuxt/nuxt/pull/21860

@orchid roost ^ I am going to bed now so hopefully you don't mind me just tagging you instead of replying to the PR or making an issue 😅

[fathom garden]

I was about to open an issue but someone else already did: https://github.com/nuxt/nuxt/issues/22068

[fathom garden]

@orchid roost where does the payload come from if I set payloadExtraction to false? I noticed that no request is being made now if I browse to another page

I am not using useFetch or anything like that so I suppose there shouldn't be a payload anyway but with payloadExtraction set to true it does generate one for every page

I am not too familiar with Nuxt so if this makes no sense please let me know 😅

[orchid roost]

Nuxt saves the content of every useasyncdata/usefetch call in a payload when doing this, so they won't be refetched when client-side navigation. otherwise they will be refetched on client side navigation even though they won't on hard reloads

[fathom garden]

I think I get it now. If payloadExtraction is set to false, the payload is only stored in the static HTML files (probably for hydrating?), and Nuxt just makes the API call when you navigate to another page. Did I get that right?

And is it really necessary to generate a payload for pages that do not use useFetch or related?

SvelteKit for example creates a __data.json (equivalent to Nuxt's _payload.json) only if you have a server-side load

I also noticed that Nuxt does not prefetch the payload (like when you hover over a link for example), this would be a nice feature too

SvelteKit has this: https://kit.svelte.dev/docs/link-options#data-sveltekit-preload-data

[orchid roost]

Exactly

[orchid roost]

It should prefetch payloads on a generated site when they come into view

[fathom garden]

Ah yes it does, my bad

[bold pelican]

Are you using pre rendering to generate some async content?