Hydration Error Due to Locale-based Redirect in Static Site with Browser Language Detection.

[besfir]

Environment

---

• Operating System: Darwin
• Node Version: v20.10.0
• Nuxt Version: 3.13.0
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, modules, i18n
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: -

---

Reproduction

https://github.com/besfir/i18n_reproduction

Describe the bug

Issue

A Hydration completed but contains mismatches error occurs when the root page is redirected to another language page based on browser language detection in a statically generated site.

Reproduction Steps

1. Use locale messages in the template.
2. Make it so that the detectBrowserLanguage cookie stores a non-default locale.
3. Directly access the root page, which triggers a redirect based on the locale saved in the cookie, resulting in a hydration error.

Demo

screencast.2024-09-04.10-26-33.mp4

Additional context

No response

Logs

No response

[BobbieGoede]

Can you confirm if you're still experiencing hydration errors with the latest patch release?

[besfir]

I updated the nuxt-i18n module to the latest version, but the error still occurs. I've also applied it to the reproduction.

[marcbelletre]

I have the same issue with latest version (8.5.5)