“注水”是 Vue SSR 中将服务端生成的静态 HTML 与客户端 Vue 实例关联、恢复响应式和交互能力的过程，不重建 DOM 而复用结构挂载逻辑；报错“Hydration node mismatch”源于客户端 VNode 与服务端 HTML 结构不一致。
直接用 HTML 模板做首屏，不是“退化”，而是回归语义与加载本质。关键不在要不要挂载，而在挂载时机、挂载方式、以及是否让框架真正“接管”而非“覆盖”。
静态 HTML 中如何正确挂载 Vue 实例
很多项目把 index.html 当成空壳，等 JS 加载完才 mount，结果首屏仍是白屏或骨架屏——这违背了静态生成的初衷。
- 确保
index.html本身已含完整、语义化、可访问的首屏 HTML（比如服务端渲染或 SSG 输出的结果），Vue 只负责增强交互，不负责“画第一笔” -
createApp必须挂载到一个**非空容器**上，且该容器内容应与 Vue 的data初始状态一致，否则会触发 DOM diff 冲突（例如服务端输出<h1>Hello</h1>，但 Vue 初始化时message是空字符串，就会删掉已有内容） - 使用
hydrate: true（Vue 3.4+）或app.mount('#app', true)显式启用 hydration，告诉 Vue “这里已有服务端/静态生成的 DOM，别重建，只激活” - 避免在
mounted钩子中执行影响首屏渲染的异步操作（如 fetch 用户信息），这类逻辑应前置到 SSR 或预取阶段
React 中使用 hydrateRoot 替代 createRoot
用 createRoot 直接 render，等于抛弃静态 HTML；而 hydrateRoot 才是静态生成后的正确入口。
- 服务端或构建时生成的 HTML 必须和客户端 React 树结构严格一致（包括 key、文本节点顺序、props 值），否则 hydration 失败，控制台报错
Hydration failed because the server rendered HTML didn't match the client - 开发环境默认开启 strict mode，会 double-render effect，但 hydration 过程只发生一次——这意味着副作用（如
useEffect）在首屏不会立即执行，要等 hydration 完成后才触发 - 若需首屏即生效的逻辑（如焦点管理、滚动定位），改用
useLayoutEffect，它在浏览器 layout 阶段同步执行，且 hydration 后立刻运行 - 注意
dangerouslySetInnerHTML内容无法被 hydration 复用，服务端输出的 HTML 片段若含动态 innerHTML，客户端必须跳过 hydration 或手动 diff
HTML 模板里混用框架组件的边界在哪
不是所有 HTML 都适合“套一层 Vue/React”，尤其当页面存在大量静态文案、SEO 敏感区块或第三方脚本依赖时。
立即学习“前端免费学习笔记（深入）”；
- 优先将 Vue/React 限定在交互密集区（如表单、列表、实时更新模块），其余区域保持纯 HTML + CSS —— 这比强行包裹整个
<body>更稳定、更易调试 - 不要用
v-html或dangerouslySetInnerHTML渲染服务端传来的整页 HTML，那等于放弃框架的响应式能力；真正需要“动态 HTML”的场景，应走defineAsyncComponent或render函数构造 vnode - 若老页面需嵌入新组件（如弹窗、侧边栏），推荐用自定义元素（
defineCustomElement）封装，而非 iframe —— 自定义元素能共享宿主页面样式、事件流，且无跨域限制 - 静态生成时，组件 props 必须可序列化（不能含函数、Symbol、Date 等），否则服务端无法正确传递初始状态
最常被忽略的点：静态 HTML 和框架 hydration 不是“先有鸡还是先有蛋”，而是“同一份 DOM 的两个生命周期阶段”。一旦你把服务端输出当成“草稿”，让客户端重绘一遍，就彻底失去了静态生成的价值。
