SSR从静态HTML到可交互中间发生了什么
在SSR（服务端渲染）过程中，从服务器生成的HTML被浏览器渲染到用户可交互的阶段，存在一个关键的技术环节——Hydration（水合）。这一过程通过客户端JavaScript将静态HTML转化为动态应用，以下是其核心原理与实现细节：
一、静态HTML的初始渲染
服务端生成完整HTML结构
服务器根据请求的URL匹配路由，执行数据预取（如调用API或查询数据库）
浏览器快速加载
用户浏览器接收到HTML后无需等待JavaScript下载完成即可显示首屏内容，显著提升感知速度（如新闻门户首屏加载时间可缩短40%-60%）
二、Hydration（水合）的核心原理
服务端预渲染
服务器根据请求的URL生成完整的HTML结构，包含初始数据（如商品信息、文章内容等），并将其嵌入HTML中（例如通过 = {...}）
客户端脚本加载
浏览器在解析HTML的同时加载与服务端同构的JavaScript包（如client-bundle.js）。该包包含完整的应用逻辑，但区别于CSR（客户端渲染），它不会重新生成DOM结构
DOM节点映射与事件绑定
客户端框架（React/Vue）通过hydrate方法将JavaScript逻辑与现有DOM节点绑定：
javascript// React示例import { hydrateRoot } from 'react-dom/client';hydrateRoot(document.getElementById('root'),
来源整理自：vue3js.cn 面试官系列
