Dynamic content in locale file is loaded in SSR then reloaded on the client during hydration

Version

v6.8.1

Reproduction link

https://none

Steps to reproduce

• Enable lazy: true in nuxt.config.js.
• Create an /locales/en.js
• In the en.js file, add a message: Math.random() translation
• In a template, display {{ $t('message') }}
• Reload the browser
• Observe the page loads with the translations already applied in SSR, showing a random number
• Observe that a few moments later, hydration happens and the random number is replaced with a new number

What is expected ?

Only the SSR version of the translations would be applied and hydration would not actually update the translations.

What is actually happening?

Hydration is updating the translations, changing the content from what SSR generates.

Additional comments?

The reason this came up is we’re using a lorem ipsum module to quickly mock up fake content in our translations. Having the content change suddenly after first load is jarring.

<div align="right">_{This bug report is available on Nuxt community (#c436)}</div>

[rchl]

It sounds like a good idea and might be a good base for fixing some other issues.

There is something that makes it non-trivial though - language files can export function in which case we have to pass context object to them and we can’t do that if we are gonna process those when Nuxt module’s code runs (which we would have to do to fix this).

We could potentially treat those two cases differently but not sure…

Are you exporting plain object or function from your language files?

[rchl]

Released in v6.13.3