前端工程 · 渲染方式
水合
Hydration
也叫:Hydrate、注水、客户端激活
服务端先输出 HTML,浏览器再把 React 等框架的事件与状态接到这些 DOM 上,让页面从「能看」变成「能点」。
详细解释
SSR/SSG 页面首屏是服务器生成的 HTML,速度快、利于 SEO。但此时按钮还没有框架事件。水合就是在浏览器里把组件树与已有 DOM 对齐,挂上状态和监听。
常见报错是 hydration mismatch:服务器渲出的 HTML 和客户端第一次渲染不一致(比如直接用 Date.now()、随机 ID、或误用仅浏览器 API)。结果是警告、重渲,甚至交互异常。
和客户端渲染相比,CSR 没有这步「对接」,但首屏往往更慢。写 Next.js 等框架时,把浏览器专用逻辑放到 useEffect 或客户端组件里。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
eng-hydration- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/10/22