Hydration Mismatch
Hey! currently in my Page, inside my template I am using a variable from a store I made. The Store uses a localStorage Variable.
The Problem is when loading my Page I get Hydration Mismatches due to apparently the store not being ready and the value returning an empty String.
What is the best way to wait for this variable to be available and ready before displaying it, to prevent Hydration Mismatches?
7 Replies
and apparently The Hydration Mismatch is not only caused by that, let me just share the Code, I think that is easier.
Code to Navbar.vue: https://paste.teamhelios.dev/4K9fW0V4rD
Error: https://paste.teamhelios.dev/Sz92hy42TK
The weirdest issue this causes is, that it duplicates 2 NuxtLinks. On the image you can see Week 1 and Week 2, as per code Week 2 does not have a redirection to anywhere. Due to the Hydration Mismatch it now has the same CSS as Week 1 (not supposed to happen) and also the same href (also not supposed to happen)
Maybe I should use some sort of datafetching with loading? I am really not sure
Oh and this is my store: https://paste.teamhelios.dev/0kGOBL55bG
Localstorage is client side. You are working with nuxt
Therefore you get different content rendered on server & client
Not sure out of my head but one way would be to ask for the data on mounted or maybe process.client
Or on the component itself use a v-if that is used when the data from storage is there
Hey, yea that I know. If you take a look at my store you can see that I am checking if the process is client-side. But using v-if is a good idea, I think I will do that. Do you also have a different solution in as this doesn't work?
Youre just checking for !process.server
Id try wirh explicit process.client
so using process.client. didn't help, could you maybe give me an example on how to fix this?