Nuxt 和水合

修复水合作用问题的为什么重要

在开发过程中，您可能会遇到水合作用问题。不要忽略那些警告。

修复它们为什么重要？

水合作用不匹配不仅仅是警告——它们是可能破坏您应用程序的严重问题的指示器

性能影响

  • 交互时间增加：水合作用错误会迫使 Vue 重新渲染整个组件树，这将增加您的 Nuxt 应用变为可交互所需的时间
  • 糟糕的用户体验：用户可能会看到内容闪烁或意外的布局偏移

功能问题

  • 交互性损坏：事件监听器可能无法正确附加，导致按钮和表单无法正常工作
  • 状态不一致：应用程序状态可能与用户看到的内容和应用程序认为已渲染的内容不同步
  • SEO 问题：搜索引擎可能会索引与用户实际看到的内容不同的内容

如何检测它们

开发控制台警告

Vue 将在开发期间在浏览器控制台中记录水合作用不匹配警告

常见原因

服务器上下文中的仅浏览器 API

问题：在服务器端渲染期间使用特定于浏览器的 API。

<template>
  <div>User preference: {{ userTheme }}</div>
</template>

<script setup>
// This will cause hydration mismatch!
// localStorage doesn't exist on the server!
const userTheme = localStorage.getItem('theme') || 'light'
</script>

解决方案：您可以使用 useCookie

<template>
  <div>User preference: {{ userTheme }}</div>
</template>

<script setup>
// This works on both server and client
const userTheme = useCookie('theme', { default: () => 'light' })
</script>

不一致的数据

问题：服务器和客户端之间的数据不同。

<template>
  <div>{{ Math.random() }}</div>
</template>

解决方案：使用对 SSR 友好的状态

<template>
  <div>{{ state }}</div>
</template>

<script setup>
const state = useState('random', () => Math.random())
</script>

基于客户端状态的条件渲染

问题：在 SSR 期间使用仅客户端的条件。

<template>
  <div v-if="window?.innerWidth > 768">
    Desktop content
  </div>
</template>

解决方案：使用媒体查询或在客户端处理

<template>
  <div class="responsive-content">
    <div class="hidden md:block">Desktop content</div>
    <div class="md:hidden">Mobile content</div>
  </div>
</template>

带有副作用的第三方库

问题：修改 DOM 或具有浏览器依赖项的库（这种情况在标签管理器中经常发生）。

<script setup>
if (import.meta.client) {
    const { default: SomeBrowserLibrary } = await import('browser-only-lib')
    SomeBrowserLibrary.init()
}
</script>

解决方案：在水合作用完成后初始化库

<script setup>
onMounted(async () => {
  const { default: SomeBrowserLibrary } = await import('browser-only-lib')
  SomeBrowserLibrary.init()
})
</script>

基于时间的动态内容

问题：内容根据当前时间变化。

<template>
  <div>{{ greeting }}</div>
</template>

<script setup>
const hour = new Date().getHours()
const greeting = hour < 12 ? 'Good morning' : 'Good afternoon'
</script>

解决方案：使用 NuxtTime 组件或在客户端处理

<template>
  <div>
    <NuxtTime :date="new Date()" format="HH:mm" />
  </div>
</template>

<template>
  <div>
    <ClientOnly>
      {{ greeting }}
      <template #fallback>
        Hello!
      </template>
    </ClientOnly>
  </div>
</template>

<script setup>
const greeting = ref('Hello!')

onMounted(() => {
  const hour = new Date().getHours()
  greeting.value = hour < 12 ? 'Good morning' : 'Good afternoon'
})
</script>

总结

  1. 使用对 SSR 友好的组合函数：useFetch, useAsyncData, useState
  2. 包裹仅客户端代码：对于特定于浏览器的内容，使用 ClientOnly 组件
  3. 一致的数据源：确保服务器和客户端使用相同的数据
  4. 避免在 setup 中产生副作用：将依赖于浏览器的代码移至 onMounted
您可以阅读Vue 关于 SSR 水合作用不匹配的文档以更好地理解水合作用。