同构渲染需分层策略、统一路由逻辑与服务端可控html输出；路由配置、数据预取、seo标签、key绑定及初始状态必须严格一致，否则触发重渲染或hydration失败。
同构渲染不是“开了SSR就自动平衡”，它天然存在服务端耗时与客户端 hydration 开销的张力；真正的平衡点必须靠分层策略+可预测的数据流+服务端可控的HTML输出来卡准。
路由与组件必须共享同一套解析逻辑
服务端和客户端若用不同路由库或配置，useRouter返回的route.params可能不一致，导致服务端渲染A组件、客户端挂载B组件，直接触发全量重渲染。Vue Router 的 createRouter({ history: createMemoryHistory() }) 仅用于服务端，客户端仍要用 createWebHistory()——但两者初始化参数（如routes数组）必须完全相同，包括顺序、path正则、props传递方式。
- 禁止在服务端路由中写
beforeEach异步守卫，它会阻塞 renderToString - 动态 import 的组件（如
() => import('./Page.vue')）需确保服务端和客户端 resolve 到同一文件路径，否则__webpack_require__ID 不一致，hydration 失败 - 所有路由级数据预取函数（如
asyncData）必须同步返回 Promise，且不能依赖 window 或 document
数据获取必须区分“服务端强制”与“客户端可跳过”
getServerSideProps（Next.js）或 serverPrefetch（Vue SSR）不是万能胶——它们让服务端等数据，但也把首屏 TTFB 拉长。关键是要识别哪些数据真得“首屏必现”，哪些可以延迟。
- SEO强依赖字段（如
og:title、description、主内容正文）必须走服务端 fetch，且超时设为 1500ms 内，超时则 fallback 静态占位 - 用户偏好、埋点配置、非首屏模块数据，应标记为
clientOnly: true，客户端 hydration 后再发请求 - 避免在服务端调用未包装的
fetch，Node.js 环境默认无 AbortController 支持，容易 hang 住进程；用node-fetch或axios并显式传timeout
HTML 输出必须包含 SEO 关键标签且不可被 JS 覆盖
爬虫只读初始 HTML 字符串，document.title = 'xxx' 这类客户端操作对 SEO 零作用。服务端必须把 <title></title>、<meta name="description">、<meta property="og:title"> 全部拼进响应体。
- 不要用第三方 SEO 插件（如 vue-meta）的客户端模式；启用其服务端模式，并确保
meta配置在setup()中静态可析出 -
JSON-LD结构化数据必须内联在<script type="application/ld+json"></script>中，且由服务端注入，不能等 hydration 后 append - 语义化标签（
<main></main>、<article></article>、<header></header>）不能用 div 模拟，否则 Google Rich Results 测试工具会忽略结构化语义
局部刷新区块的 key 和初始状态必须严格对齐
局部同构刷新（如评论区、实时价格）最容易破环 hydration —— 服务端 key 是 Math.random()，客户端生成另一个随机值，React/Vue 就认为是全新节点，丢弃服务端 DOM，重走 mount 流程。
- key 必须来自业务稳定标识，例如
key={product.sku}或key={`comments-${postId}`} - 服务端传给组件的 props 必须与客户端初始 props 类型一致：若服务端传
null，客户端不能默认undefined；建议统一序列化后挂到window.__INITIAL_DATA__，客户端从这里取 - 禁用 zustand / pinia 全局 store 直接驱动局部区块，除非服务端已通过
store.hydrate()注入初始 state；否则 hydration 后 store 为空，区块塌陷
最常被忽略的是：服务端渲染完成后的 HTML 必须真实包含可索引文本，而不是一堆 <div id="__nuxt"></div> 空壳。验证方法很简单——关掉浏览器 JS，刷新页面，看是否还能读到标题、正文、链接。做不到这点，其他所有优化都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
