Nuxt 和水合
为什么修复水合问题很重要
在开发过程中，您可能会遇到水合问题。不要忽视这些警告。
为什么修复它们很重要？
水合不匹配不仅仅是警告 - 它们是可能破坏您的应用程序的严重问题的指示器：
性能影响
- 增加交互时间：水合错误强制 Vue 重新渲染整个组件树，这将增加您的 Nuxt 应用程序变得交互的时间
- 糟糕的用户体验：用户可能会看到内容闪烁或意外的布局偏移
功能问题
- 损坏的交互性：事件侦听器可能无法正确附加，导致按钮和表单无法正常工作
- 状态不一致：应用程序状态可能在用户看到的内容与应用程序认为已渲染的内容之间不同步
- SEO 问题：搜索引擎可能会索引与用户实际看到的内容不同的内容
如何检测它们
开发控制台警告
Vue 将在开发期间的浏览器控制台中记录水合不匹配警告：
常见原因
服务器上下文中的仅浏览器 API
问题：在服务器端渲染期间使用浏览器特定的 API。
<template>
<div>User preference: {{ userTheme }}</div>
</template>
<script setup>
// 这将导致水合不匹配！
// localStorage 在服务器上不存在！
const userTheme = localStorage.getItem('theme') || 'light'
</script>
解决方案：您可以使用 `useCookie``：
<template>
<div>User preference: {{ userTheme }}</div>
</template>
<script setup>
// 这在服务器和客户端上都有效
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>
总结
- 使用 SSR 友好的组合式函数：
useFetch``、useAsyncData、`useState - 包装仅客户端代码：使用
ClientOnly组件处理浏览器特定的内容 - 一致的数据源：确保服务器和客户端使用相同的数据
- 避免设置中的副作用：将依赖浏览器的代码移入
onMounted
您可以阅读 Vue 关于 SSR 水合不匹配的文档 以更好地理解水合。