vue ssr 的核心是服务端生成结构一致的 vnode 并输出 html，客户端 hydration 时复用该结构；服务端不执行响应式、生命周期、dom 操作，需隔离浏览器 api，数据预取、路由匹配与状态序列化必须同步完成以保证一致性。
Vue 组件在 SSR 环境下不会真正“渲染”到页面，而是生成 HTML 字符串；客户端拿到后才通过 hydration 激活交互能力。关键不是让组件“运行得一样”，而是让服务端和客户端产出结构一致的 vnode，避免 hydration 失败或降级重绘。
虚拟 DOM 的角色完全不同
服务端的 vnode 只是中间描述结构，不参与 diff、不触发 patch、不操作真实 DOM。它只做一件事：把组件状态转成 HTML 字符串。所有响应式追踪（如 ref 的 track/trigger）、异步更新队列（queueJob）、生命周期钩子（mounted、updated）在服务端都不执行。
- 静态内容（如纯文本、固定 class）会被编译器标记为 HOISTED，直接复用预编译字符串，跳过 vnode 构建
- 动态绑定（如
v-if、:class、{{ msg }}）才触发条件判断和 vnode 生成 - 服务端渲染完 vnode 就丢弃，不保留任何引用或副作用上下文
生命周期与副作用必须隔离
像 mounted、beforeMount 这类依赖浏览器 API 的钩子，在服务端不会调用。如果组件内部在 setup 或 data 中直接访问 window、document、localStorage 或创建定时器，会立刻报错并中断 SSR。
- 把浏览器专属逻辑移到
onMounted或onActivated中，确保只在客户端执行 - 使用
process.client或typeof window !== 'undefined'做环境判断 - 地图、图表、富文本编辑器等第三方组件，需包裹在
<clientonly></clientonly>或动态 import 中延迟加载
数据预取必须同步完成
SSR 要求首屏所需数据在服务端渲染前就准备好，否则返回的 HTML 会缺失内容，或者触发客户端重复请求。不能依赖组件挂载后再发请求。
- 在路由组件中定义
asyncData或fetch方法，由 SSR 入口统一调用并注入初始 state - 服务端需等待所有 asyncData 执行完毕、Promise 全部 resolve 后，再调用
renderToString - 客户端 hydration 时，应复用服务端注入的数据，避免二次拉取（可通过 context.state 或 pinia/persistedstate 实现）
路由与状态必须严格对齐
服务端渲染时，必须根据请求 URL 主动匹配路由，并确保所有异步路由组件已加载完成，否则生成的 HTML 和客户端激活时的视图不一致，hydration 会失败。
- 服务器端调用
router.push(req.url)+await router.isReady()，再开始渲染 - 客户端初始化路由时，URL 必须与服务端一致，不能靠 history.state 或 hash 拼接
- store 状态需序列化到 HTML 中（如
window.__INITIAL_STATE__），客户端启动时优先读取而非重置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
