VNode序列化是提取可序列化VNode字段供SSR传输，hydration是复用服务端HTML并激活响应性；二者需结构与状态严格一致，否则触发mismatch降级重渲染。
Vue.js 的 VNode 序列化与服务端渲染（SSR）中的“数据注水”（hydration）是两个紧密关联但职责分明的机制：前者负责将虚拟 DOM 转为可传输/缓存的结构化数据，后者则在客户端将服务端生成的 HTML 与 Vue 实例重新关联，恢复响应性。
什么是 VNode 序列化？
VNode（Virtual Node）本身是内存中的 JavaScript 对象，不可直接跨环境传递。在 SSR 场景中，服务端渲染完成后，需将关键状态（如组件树结构、props、key、静态标记等）以轻量、可序列化的方式保留下来，供客户端复用。Vue 并不直接序列化完整 VNode 树（因其含函数、闭包、响应式引用等不可 JSON 化字段），而是：
- 仅提取可序列化的部分：标签名、属性（attrs）、props（基础类型）、子节点数量与类型标记、静态提升标识（staticCount）、key 和 scopeId 等；
- 跳过不可序列化字段：如
componentOptions中的render函数、data中的响应式代理、context、parent等； - 对服务端生成的 HTML，Vue 会通过
renderToString或renderToNodeStream输出字符串，同时借助createSSRApp和ssrContext注入预编译的组件信息（如__VUE_SSR_SETTERS__）用于后续 hydration 定位。
数据注水（Hydration）如何工作？
客户端挂载时，Vue 不从头创建 DOM，而是“注水”——复用服务端已生成的 HTML，并激活其交互能力。这个过程依赖三个核心前提：
- HTML 结构完全一致：客户端 render 函数输出的 VNode 结构（包括 key、slot 分布、v-if/v-for 顺序）必须与服务端输出的 HTML DOM 树严格匹配，否则触发 hydration mismatch 警告并降级为重渲染；
-
服务端状态可还原：通过
window.__INITIAL_STATE__或script[type="application/json"]注入的初始数据，需在客户端 createStore / createPinia 时同步还原，确保响应式系统起点一致； -
组件级 hydration 控制：使用
v-cloak、client-only组件或defineAsyncComponent({ ssr: false })可显式跳过某些组件的服务端渲染，避免不兼容逻辑（如 window/document 访问）导致服务端报错。
实际开发中需注意的关键点
很多 SSR 问题源于对序列化边界和 hydration 约束理解偏差：
立即学习“前端免费学习笔记（深入）”；
- 不要在
data()或setup()中直接读取window/document—— 服务端无这些对象，会导致渲染失败；应改用onMounted或process.client守卫； - 动态 class / style 若含服务端不可预测值（如时间戳、随机 ID），会导致 hydration 不匹配 —— 应确保服务端与客户端计算结果一致，或用
ssr:false隔离； - 服务端生成的 HTML 必须包含完整的根元素（如
<div id="app">...</div>），且客户端 mount 时选择器要精确匹配，否则 hydration 失败； - 使用
useSSRStore（Pinia）或provide / inject传递服务端解析的数据时，需确保 provider 在服务端已注入，并在客户端 hydration 前完成 setup。
Vue 3.4+ 的优化：更细粒度的 hydration 控制
新版 Vue 引入了 hydrate: false 挂载选项和 <ClientOnly> 内置组件，也支持在单文件组件中用 /* @__NO_SIDE_EFFECTS__ */ 标记纯函数，辅助服务端静态分析。更重要的是，createSSRApp 返回的 app 实例默认启用 async setup 支持 和 自动 suspense 边界处理，使异步数据获取（如 async setup + await useAsyncData）能自然融入 SSR 生命周期，无需手动管理 loading 状态同步。
不复杂但容易忽略：VNode 序列化不是深拷贝，hydration 也不是简单“把 JS 加回去”，而是 Vue 在服务端与客户端之间建立的一套结构契约与状态契约。守住这两条线，SSR 就稳了。
