前端知库

Hydration mismatch 为什么发生,应该怎样修复?

参考答案

Hydration 是客户端把组件逻辑连接到已经生成的 HTML 上。初始客户端渲染结果应与服务端输出匹配,否则可能产生警告、错误恢复或额外重建。

常见原因是渲染时读取随机值、当前时间、浏览器专有状态,服务端与客户端使用不同初始数据,或不合法 HTML 被浏览器自动修正。应先保证确定性的初始输出,再在合适的客户端阶段更新差异内容。

抑制警告只适合极有限且可解释的场景,不是通用修复。排查时比较服务端 HTML 与客户端首次输入,并核对语言、时区、认证和数据序列化;不要通过移除所有 SSR 来掩盖局部问题。