解决Nuxt3: Hydration Mismatch

Nuxt3水合问题，这个情况是只有服务端渲染才会出现的情况，这里稍微记录，

正文

目前遇到了不止一次，情况也很简单，服务端和客户端数据渲染不同造成的。

报错情况

正常情况，应该是在浏览器的控制台报错，提示用户水合失败。

如果你不清楚前端中的水合概念，建议先看看这个概念，明白了水合，就能很快明白这个报错的原因。

如果你已经了解，直接跳过下边的概念介绍，大概浏览一下即可。

Hydration completed but contains mismatches

前端水合

在前端开发中，水合（Hydration）是指在服务端渲染（SSR, Server-Side Rendering）完成后，将静态 HTML 的内容与客户端JavaScript代码进行绑定，使其具备交互能力的过程。

具体来说

• 在 SSR 阶段，服务器会生成页面的 HTML 并发送给浏览器，用户可以立即看到内容。
• 然而，此时的页面是“静态”的，没有事件监听、状态管理等动态行为。
• 水合过程就是由客户端框架（如 React、Vue 等）接管这些静态 HTML 元素，并为其绑定相应的数据和逻辑，使页面变得可交互。

关键点

1. 目标：将服务端渲染的静态 HTML 转变为具有交互能力的动态页面。
2. 触发时机：通常在客户端脚本加载完成后自动执行。
3. 注意事项
   • 客户端和服务端渲染的内容必须保持一致，否则会出现“不匹配”的警告或错误。
   • 水合是一个性能敏感操作，应尽量减少其耗时以提升用户体验。

情况分析

综上所述，这个提示的意思是，服务器渲染（SSR）的结果与你完成加载后显示的内容不同。

多半是由于你在浏览器里加载了一些数据，比如 localStorage，或者一些全局变量，时间戳，随机数函数。

然后页面客户端会被重新渲染，就和服务端不一样。

解决方法

目前这两种解决方式都不太好，

1，在onMounted中去渲染数据

<script setup>
    const a = ref()
    const test = ref()
    onMounted(()=>{
        a.value = ue
        test.value = getRandom()
    })
</script setup>

2，渲染的数据用ClientOnly标签包裹

这个效果很难说好不好用，我尝试用来包裹验证码，但是效果没那么好，不过也许用来处理随机数之类的效果会好一点。

后续随着项目的推进，我会尽量去验证。

结语

这算是个比较简单的问题，如果只是渲染一些不需要操作的数据，也就是展示类的数据，就算稍微有点不对其实也无所谓。

只是浏览器有个报错很不舒服，所以这里改一下。

参考

渲染模式 · Nuxt Concepts

Nuxt3: Hydration Mismatch（已解决）

Nuxt3 提示Hydration completed but contains mismatches

nuxt3服务端与客户端渲染不一致-案例