nuxtjs3 - 为什么我在 Nuxt 3 中使用 useState 时会收到 hydration 警告？

Question

MRE:https://github.com/Morpheu5/nuxt3-hydration-mre (是 https://box.morpheu5.net/s/H6WXBfCebrRyTa8 )

根据文档，NuxtJS 3 中的 useState 应该是创建状态的 SSR 友好轻量级方法。我需要使用它，以便任何 page/[somepage].vue 都可以设置一些数据以供 layout/default.vue 使用。这是一个页面:

<template>
    <div>Some page content.</div>
</template>

<script setup>
    useState('page_title', () => 'Some page title');
</script>

这是默认布局:

<template>
    <div>
        <h1>{{ page_title }}</h1>
        <slot />
    </div>
</template>

<script setup>
    const page_title = useState('page_title');
</script>

当我在开发模式下运行它时，我在浏览器的控制台中收到此警告:

runtime-core.esm-bundler.js:38 [Vue warn]: Hydration text content mismatch in <h1>:
- Client: 
- Server: Some page title 
  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>

我知道这只是一个警告，如果我生成并静态部署(无论如何这是我的目标)，我不会收到警告，但我想知道这是否表示更深层次的问题我忽略的地方。

另外值得指出的是，生成的 html 不会“预呈现”我在页面中指定的默认值，但这可能只是我自己对它的工作原理的误解，我可能错误地期望会发生这种情况.

Answer 1

hydration 警告是由于服务器呈现了一个空的 <h1> 引起的。客户端在其中呈现一些文本的位置。

在 SSR 上向上传递状态(例如，此处从页面到布局)将不起作用。

您可以通过用 <client-only>...</client-only> 包裹标题来避免 hydration 错误这将禁用这部分的 SSR。因此，内容不同也就不足为奇了(又名 hydration 警告)。