Next.js 13 引入了基于 React Server Components 的 App Router，默认组件为服务器组件。在这种模式下，页面先在服务端渲染出 HTML，再由客户端 React 接管完成水合。如果服务端和客户端渲染出的内容不一致，就会触发水合错误。理解客户端组件的渲染策略，是解决该类问题的关键。
什么是水合错误
水合（hydration）是指 React 在浏览器端将已有的服务端 HTML 与客户端组件树进行匹配并绑定事件的过程。当服务端生成的标记和客户端首次渲染结果不同，React 无法完成匹配，便会在控制台输出类似 Text content does not match server-rendered HTML 的警告，这就是水合错误。
为什么客户端组件策略很重要
在 Next.js 13 中，只有标注了 use client 的文件才会成为客户端组件，可以使用状态、效果和浏览器 API。若直接在服务器组件里调用 window 或生成随机数，服务端没有这些环境，客户端却有，就会造成不匹配。
常见触发原因
- 在服务器组件中使用 Date.now() 或 Math.random() 渲染内容
- 直接读取 localStorage 并参与首屏渲染
- 依赖浏览器尺寸做条件渲染且未做客户端隔离
使用客户端组件修复水合错误
通过 use client 将交互或浏览器相关逻辑移入客户端组件，可避免服务端参与不一致渲染。下面示例展示一个安全的客户端时间组件：
'use client';
import { useState, useEffect } from 'react';
export default function ClientTime() {
// 初始为空字符串，避免服务端客户端不一致
const [time, setTime] = useState('');
useEffect(() => {
// 仅在客户端挂载后设置时间
setTime(new Date().toLocaleTimeString());
}, []);
return (
<div>
{time ? <p>当前时间：{time}</p> : <p>加载中...</p>}
</div>
);
}
服务器组件中使用客户端组件
服务器组件可以直接引入上述客户端组件，而不必担心水合问题：
// 服务器组件 page.js
import ClientTime from './ClientTime';
export default function Page() {
return (
<main>
<h1>欢迎</h1>
<ClientTime />
</main>
);
}
其他实践建议
| 场景 | 推荐策略 |
|---|---|
| 需要使用浏览器 API | 用 use client 包裹，并在 useEffect 中访问 |
| 避免随机内容不一致 | 先渲染占位，挂载后再更新 |
| 第三方含 window 的库 | 动态导入并设置 ssr: false |
总结
Next.js 13 的水合错误多源于服务器与客户端渲染环境差异。明确组件边界，把浏览器相关逻辑放入客户端组件，并延迟到挂载后执行，是最直接有效的渲染策略。合理运用 use client 与动态导入，可显著降低错误发生率。
Next.js_13hydration_errorclient_component修改时间：2026-07-27 14:00:44