为什么在 Nuxt 3 中使用 useState 时会收到此水合警告？

Question

MRE： https: //github.com/Morpheu5/nuxt3-Hydration-mre（原为https://box.morpheu5.net/s/H6WXBfCebrRyTa8）

根据文档，useStateNuxtJS 3 应该是 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>

generate我知道这只是一个警告，如果我静态部署（无论如何这是我的目标），我不会收到警告，但我想知道这是否表明我忽略了某个更深层次的问题。

还值得指出的是，生成的 html 不会“预渲染”我在页面中指定的默认值，但这可能只是我自己对其工作原理的误解，并且我可能错误地期望会发生这种情况。

Answer 1

水合警告是由于服务器渲染了一个空的<h1>而客户端在其中渲染了一些文本而引起的。

在 SSR 上传递状态（例如，从页面到布局）将不起作用。

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