水合

定义

水合(Hydration,亦译注水)是指在服务端渲染或静态生成的应用中,客户端 JavaScript 接管服务器已输出的静态 HTML,为其附加事件监听、恢复内部状态,使原本仅可展示的页面转变为可交互界面的过程。它是连接服务端产出 HTML 与客户端可交互两个阶段的关键环节。[1]

原理

服务器先渲染出带有完整内容的 HTML 并发送到浏览器,浏览器据此立即显示页面。与此同时,客户端下载与该页面对应的 JavaScript。框架在客户端重新构建出与服务端一致的组件树,但不再重新生成 DOM 节点,而是将已有的 DOM 与组件结构进行匹配,并为其绑定事件处理器、初始化状态。匹配要求两端渲染结果一致,否则会产生水合不匹配错误。

特点

水合使应用兼得首屏快速展示与后续完整交互,但也带来成本:页面在水合完成前虽可见却不可交互,可能造成响应延迟;水合需要下载并执行与渲染内容对应的 JavaScript,在大型页面中开销显著。为此业界发展出多种优化策略,如选择性水合、渐进式水合、孤岛架构下的局部水合,以及以可恢复性(resumability)替代传统水合的方案。

应用

水合是 React、Vue、Svelte 等框架在 SSR/SSG 场景下的标准机制,广泛存在于 Next.js、Nuxt、SvelteKit 等元框架中。Astro 的孤岛架构与 Qwik 的可恢复模型,则代表了减少乃至重构水合开销的前沿探索方向。