HTML水合机制原理详解

Hydration（水合）并非给静态HTML“加水”，而是让服务端渲染的纯结构化HTML在浏览器中“活过来”——通过复用已有DOM节点，精准接管事件、状态与生命周期，而非重新渲染整棵树；其核心前提是服务端HTML与客户端虚拟DOM必须严格对齐，任何细微差异（如时间戳、随机数、未适配SSR的CSS库或数据获取时机不一致）都会触发Hydration mismatch，导致白屏或交互失效；理解这一机制的关键在于认清：真正的挑战不在于调用hydrate函数，而在于确保服务端输出的每一个字符，在客户端JS执行瞬间，都与框架内存中的虚拟DOM树逐字节一致。

Hydration 不是给 HTML “加水”，而是让静态 DOM “活过来”——它必须在服务端 HTML 与客户端框架虚拟 DOM 完全对齐的前提下，把事件、状态、生命周期接管过来。对不上，就报 Hydration mismatch 错误，页面直接白屏或交互失效。

什么是 hydration？不是重渲染，是“复用+接管”

服务端吐出的 HTML 是纯结构：有 Click me，但没 onclick，没状态，不响应任何输入。hydration 就是在浏览器里，用同一套组件逻辑（比如 React 的 App 或 Yew 的 ）去“认领”这个已存在的 DOM 节点，而不是删掉重造。

关键区别：

• CSR（客户端渲染）：清空 root，再 render() 整棵新树
• SSR + hydration：保留原有 DOM，调用 hydrateRoot() 或 Renderer::hydrate()，只挂事件、连状态、补副作用

一旦 DOM 结构或文本内容在服务端和客户端不一致（比如服务端写了 "Loading..."，客户端初始 state 是 ""），hydration 就会中断并抛错。

hydrateRoot() 和 Renderer::hydrate() 做了什么？

以 React 和 Yew 为例，这两个函数名字不同，做的事本质一样：遍历现有 DOM，逐节点比对、打标记、绑定逻辑。

React 中：

import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);

Yew 中：

Renderer::<app>::with_root(root_element).hydrate();
</app>

它们都要求：

• root 元素必须存在，且内容由同版本、同 props、同数据源的服务端渲染生成
• 不能在 hydration 前手动修改 DOM（比如用 innerHTML 清空或插入）
• 服务端返回的 HTML 必须包含完整、合法的嵌套结构；少个