Hydration Mismatches & Content Lag After SSG Deployment on Netlify

[OversensitiveCat]

Environment

• Operating System: Darwin
• Node Version: v23.10.0
• Nuxt Version: 3.17.3
• CLI Version: 3.25.1
• Nitro Version: 2.11.12
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, modules, future, eslint, content
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected]
• Build Modules: -
• Node Version used with Netlify: 22.15.1

Version

v3

Reproduction

https://github.com/OversensitiveCat/content-with-netlify

Description

After deploying with npm run generate on Netlify, some fetched content is not visible on initial page load (before hydration completes), even though it’s present in the page source. Additionally, I’m seeing a hydration mismatch warning in the console.

This issue only occurs after deployment on Netlify. When serving the same build locally with npx serve .output/public—even using the same Node version as Netlify (v22.15.15)—everything works perfectly.

I’ve set up a minimal reproduction and included the deployed site below:

Homepage (no issues): https://content-with-netlify.netlify.app/

Other page (issue on first load): https://content-with-netlify.netlify.app/news/

There’s no problem when navigating between pages—only during the initial load.

Additional context

Important clarification: This issue appeared after upgrading Nuxt to version 3.17. It does not occur with Nuxt 3.16.2.

Logs

[OversensitiveCat]

I've added dynamic pages to the example: the same problem can be seen.

[OversensitiveCat]

Hi @farnabaz, sorry to tag you directly — I just need a bit of clarification.

Is there something wrong with my code, or is this a bug in Nuxt Content?
Is Nuxt Content still fully compatible with SSG deployed on Netlify?

I’m facing this issue on multiple projects and currently have to downgrade to [email protected] in order to keep using Nuxt Content, which is starting to become quite limiting.

Let me know if I can help clarify or provide more context. Thanks a lot for your help!

– EDIT – Maybe it’s a similar issue to this one? #3408

[farnabaz]

@OversensitiveCat, I checked your repository. The issue is related to useAsyncData and Netlify behavior. Why does it create a hydration issue?!

• You are using route.path as the cache key for useAsyncData
• Since /news is a directory, on Netlify it will redirect to /news/. So:
  • On server-side, route.path is /news
  • On client-side, it is /news/
• On the client, the cache key is different, and this causes a hydration issue.

You can solve the issue, by changing the useAsyncData key to something static or removing trailing slash:

const { data: news } = await useAsyncData('news-list', async () => {
  ...
})

[OversensitiveCat]

Thank you so much, it worked! I didn't think the solution would be that simple — really appreciate it! 🙏

[jb-alvarado]

Shouldn't this be noted in the documentation? After all, it uses the route.path as the cache key.