这个错误会在生产 Nuxt3 期间导致问题吗

Question

我在下面的特定代码行中收到此错误，该代码最初在服务器上设置为一个值，然后当客户端登录时，根据其登录状态将其设置为不同的值。

[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>

我不知道为什么会这样，这里是 .vue 文件中的代码

<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>

Answer 1

这意味着文本在服务器上被更改为“退出”，水化后变为“登录”，这是因为水化后authStore.isLoggedIn的值发生了变化。

为了解决这个问题，您可以使用 cookie，在水合之前在服务器上设置您的身份验证状态，以及客户端处理。

Answer 2

可以在此处找到有关此问题的更多详细信息： https ://stackoverflow.com/a/67978474/8816585

但主要是服务器端的内容与客户端的内容不同。 作为一个快速比较，您可以使用和不使用 JS 加载应用程序的页面，看看有什么不同。

否则，这在性能方面是一个巨大的问题，并可能导致奇怪的错误。 我建议修复它。 不确定您的具体情况的确切解决方案，但authStore可能以一种可以在服务器端和客户端工作的方式完成。