conscious-sapphire

Getting `Hydration node mismatch` in nuxt 3

I've set up vue-query as a nuxt plugin as explained in the docs, but now I always seem to get a hydration error. Is this a bug? Is there a working example somewhere?

2 Replies

conscious-sapphireOP•3y ago

In the template, I'm doing:

  <div v-if="isLoading">Loading data</div>
  <div v-else-if="data">{{data}}</div>

  <div v-if="isLoading">Loading data</div>
  <div v-else-if="data">{{data}}</div>

The cause of the hydration issues in nuxt seems to be because isLoading is false on the client, but it is true on the server. what is the proper way to handle this? Its technically working correcly, but I would think that on the server isLoading shouldn't ever be true since:

  onServerPrefetch(async () => await suspense())

  onServerPrefetch(async () => await suspense())

would get the data on the server before it tries to render the template?

rival-black•3y ago

It seems to be regression trying to fix nuxt2 memory leak. Try with earlier version

Gaming

Programming

Getting `Hydration node mismatch` in nuxt 3

Did you find this page helpful?