Hydration Mismatch when changing state

[chrispreisler]

Reproduction

https://stackblitz.com/edit/nuxt-starter-ayzr1f?file=pages/[...slug].vue

Steps to reproduce the bug

I have a header store. There I have a state to know, if my header component should be display in black or in white. I then have different stage modules, where I set the header state to true or false, to display the right css styles.

1. Reload page
2. State is first true then false
3. Check log to see warning about hydration mismatch.

Expected behavior

I would have expected, that the state is directly false and not first true and then false. I think it has something to do with ssr hydration, but I didn't find anything in the docs, if I made anything wrong.

Actual behavior

I would have expected, that the state ist directly false, because I set it in directly in the setup function of the stage module to false.

Additional information

Thanks a lot for looking into it.

[posva]

This is due to the order of execution of your components: all except Stage.vue are rendering before you change the isLight to true. So they render with the initial value of false and, on server, never render again. That's why Stage.vue is the only copmonent rendering with false initially, because it's the only one being able to see that change. On client, the false value is picked up on hydration, so all components render with false, causing a Hydration mismatch.

To solve this, you need to ensure the isLight setting is set before any component relying on it is rendered.

In general, avoid setting a global settings that are hydrated in arbitrary components' setup() as it will create Hydration mismatches

[chrispreisler]

@posva Thanks so much for the fast answer. So I could solve this by puting the setting of isLight to false in an onMounted function to ensure, that every component is ready. This would solve the hydration mismatch, but of course it still would be true for a short time and then false, when mounted.

So as you wrote the only solution would be, to check in the app.vue, if my page contains a specific Stage and then set the state to false. Of course this means, I have to find those component and can't add the state change to the component itself.

As I understand you right, there is no option to do this on a component level.