0

I got this error below from a specific line of code where it is initially set to one value on the server and then when the client logins in it is set to a different value based on their login status.

[Vue warn]: Hydration text mismatch:
- Client: "Sign In"
- Server: "Sign Out" 
  at <RouterLink to="/auth" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink key=0 to="/auth" onClick=fn<handleSignOut> > 
  at <Nav class="dark:bg-darkBg dark:text-darkSecondary" > 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

I do not know why this is the case here is the code from the .vue file

<li class="nav-li">
  <NuxtLink to="/auth" v-if="authStore.isLoggedIn" @click="handleSignOut">
    Sign Out
  </NuxtLink>
  <NuxtLink to="/auth" v-else>Sign In</NuxtLink>
</li>
Luke Longo
  • 119
  • 1
  • 7

2 Answers2

1

That means The Text has been changed it was "Sign Out" on the server, and become "Sign In" after hydration, And that's because the value of authStore.isLoggedIn has been changed after hydration.

To solve it you can use cookies, to set up your authentication state on the server before hydration, and client-side processing.

Mina
  • 14,386
  • 3
  • 13
  • 26
0

More details regarding this issue can be found here: https://stackoverflow.com/a/67978474/8816585

But mainly, the content on the server side is different from the one on the client side. As a quick comparison, you can load the page of your app with and without JS to see what is different.

Otherwise, this is a huge problem in terms of performance and can lead to weird bugs. I recommend fixing it. Not sure of the exact solution for your specific case, but authStore could probably be done in a way that could work on both server and client side.

kissu
  • 40,416
  • 14
  • 65
  • 133