"Hydration text content mismatch" error causes faulty state after pushing to an array

[bitbytebit1]

Reproduction

https://stackblitz.com/edit/nuxt-starter-upur5z?file=app.vue

Steps to reproduce the bug

Load the page (observe that the html is rendered correctly initially)

Expected behavior

The page should show ["en", "test"] after pushing to an array however due to a Hydration mismatch the page re-renders causing an additional item to be pushed to the array.

Actual behavior

The page shows ["en", "test", "test"].

Additional information

[Vue warn]: Hydration text content mismatch in <pre>:
- Client: [
  "en",
  "fr",
  "es",
  "test"
]
- Server: [
  "en",
  "fr",
  "es",
  "test",
  "test"
] 
  at <App key=3 > 
  at <NuxtRoot>

[posva]

This is because you are pushing both in the server and then on the client but since the client already hydrates the state that was sent from the server, it ends up adding another test.

The solution depends on your actual code: a Set, pushing only on server with if (process.server) or ensuring this kind of initialization is only done once with a flag on the store