换个角度想
水合像样板间通电：家具早就摆好了，看上去和成品一模一样；电工把线接上之后，灯才真的能开、门铃才真的会响。
术语 · 前端
水合
Hydration
在浏览器中为服务端生成的静态 HTML 接上 JavaScript 交互能力。
静态页面接上交互
两份材料
page.html已经能看
app.js加载中…已就绪
立即订阅能看，还不能点已激活，可以点了从「能看」到「能用」
app.js ▂▄▆ 下载中
页面照常显示
addEventListener('click')
接到已有的按钮上
- 同一个页面，现在能用了
服务端渲染好 HTML
什么时候会遇到它
首屏加速
服务端直出让用户先看到内容，不用盯着白屏等 JS。
排查失灵
页面显示正常但点不动，多半是水合没完成或失败了。
按需水合
只给需要交互的组件接线，纯展示的部分保持零 JS。
想一想
用户反馈：页面秒开，但头两秒点按钮没反应。这是坏了吗？
看答案
不一定——这是水合窗口期：HTML 已经显示，JavaScript 还没接管。减小 JS 体积、优先水合关键按钮，可以把这个窗口压短。
最容易踩的坑
水合要求 JS 渲染出的结构和服务端 HTML 完全对得上，对不上就会报错或页面闪变。窗口期越长，用户越容易点了没反应——别把水合当免费午餐。