useFetch with prerenderRoutes of endpoint double-hydrates with error (Nuxt Generate)

[TechAkayy]

Environment

• Operating System: Darwin
• Node Version: v20.14.0
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.7.0
• Builder: -
• User Config: devtools, nitro, vite, sourcemap, experimental, modules
• Runtime Modules: @nuxtjs/tailwindcss@6.12.1
• Build Modules: -

Reproduction

Reproduction-1: https://github.com/TechAkayy/nuxt-prerender-endpoint-issue-on-netlify (app.vue with default layout & a products page)

To test the netlify deploy of this repo -

• Go to https://marvelous-gaufre-cbd96b.netlify.app/,
• Open browser console and navigate to the products page to see error logged in the console.
• This reproduction has minify set to false with sourcemap enabled.
• Note: this reproduction doesn't use any js component libraries.

Home page:

When navigating to products page:

Reproduction-2: https://github.com/TechAkayy/nuxt-prerender-endpoint-issue-on-vercel (app.vue with no layout or pages)

To test the vercel deploy of this repo -

• Open browser console to see error - https://nuxt-prerender-endpoint-issue-on-vercel-3ljm.vercel.app/.
• Note: this reproduction uses Vuetify, but the issue is not vuetify related.

Describe the bug

I'm using Nuxt Generate to build my app going full static.

I want to generate all my pages at build time. So, I'm using prerenderRoutes('/api/store') to generate the JSON payload, where the endpoint is a server route returning an array of products from a local JSON file.

I also don't want to make any api calls during runtime. So, my useFetch is set with server: true. I guess server: true is set as default in useFetch, but just calling it out here!

With npm run generate and then npx serve ./output/public (or other commands when using nitro static presets), it works locally without any issue. I verified that the JSON payload is getting created correctly and useFetch is reading them correctly.

Issue is that when I go to production by deploying the app to Netlify or Vercel, I notice that useFetch is fetching data from the JSON payload twice. The first time it hydrates, it reads the data as expected (an array of products).

But, immediately, it follows up with another hydration, this time, it reads the data in a stringified format. This breaks the page, as the useFetch data is not reactive anymore.

The weird part is it works fine locally with serve, but I notice this issue only in production deploy.

Additional context

I have tried various troubleshooting.

• Manually added netlify-static and vercel-static nitro preset to nuxt config.
• Tried toggling different combo of these three experimental flags - renderJsonPayloads, payloadExtraction, sharedPrerenderData.

Initially, I noticed this in my Nuxt-Vuetify-TailwindCSS template here and thought it might be related to Vuetify, but I was able to remove Vuetify and reproduce with as plain Nuxt Tailwind repo. @userquin

Thanks for looking into this. Please let me know if you required any other info. Also, kindly correct me if in fact I'm using prerenderRoutes incorrectly.

Logs

No response

[danielroe]

Does it make a difference if you set responseType: 'json' in your useFetch call?

[TechAkayy]

Does it make a difference if you set responseType: 'json' in your useFetch call?

Thanks @danielroe! That helped with fixing the issue with reproduction-1, but not with the reproduction-2.

On a side note,

• I always thought building an SSR vs SSG on the same project was just a command away, nuxi build for SSR and nuxt generate for SSG. So, even for reproduction-1, is the prerendering of api endpoints with prerenderRoutes and the useFetch with responseType required?
• The prerenderRoutes of api endpoints is not very commonly used based on what I have seen till now. So, wondering if responseType: 'json' is mandatory? In fact, I didn't knew that param existed in useFetch till now.

With reproduction-2, responseType: 'json' didn't help. This one doesn't use layouts or pages, just an app.vue. Please let me know if you require any other input. Thanks again!

https://nuxt-prerender-endpoint-issue-on-vercel-3ljm.vercel.app/

[TechAkayy]

I tested today on both netlify & vercel. Removed responseType: 'json' from useFetch params. Nitro presets of both are working nicely. Not an issue anymore.

One thing I noticed was to ensure experimental.payloadExtraction is not turned off as it's required for nuxt generate - docs. I was playing with experimental flags, and had this turned off and that persisted the issue.

Thanks all! All good here!