跳到主要内容

前端工程 · 渲染方式

水合

Hydration

也叫:Hydrate、注水、客户端激活

服务端先输出 HTML,浏览器再把 React 等框架的事件与状态接到这些 DOM 上,让页面从「能看」变成「能点」。

详细解释

SSR/SSG 页面首屏是服务器生成的 HTML,速度快、利于 SEO。但此时按钮还没有框架事件。水合就是在浏览器里把组件树与已有 DOM 对齐,挂上状态和监听。

常见报错是 hydration mismatch:服务器渲出的 HTML 和客户端第一次渲染不一致(比如直接用 Date.now()、随机 ID、或误用仅浏览器 API)。结果是警告、重渲,甚至交互异常。

和客户端渲染相比,CSR 没有这步「对接」,但首屏往往更慢。写 Next.js 等框架时,把浏览器专用逻辑放到 useEffect 或客户端组件里。

开发者信息
术语 ID
eng-hydration
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/10/22