同构渲染需满足路由一致、数据预取可复用、状态跨端序列化三条件；否则仅为伪同构，导致SEO失效或首屏白屏/闪动。
同构渲染不是“开了SSR就自动生效”，它必须满足三个刚性条件才能真正兼顾首屏速度和动态SEO：路由一致、数据预取可复用、状态能跨端序列化。缺一不可，否则你看到的只是“伪同构”——服务端吐了HTML，但爬虫拿不到关键内容，用户首屏还是白屏或闪动。
Vue/React中createRouter与getServerSideProps必须共享同一套路由配置
客户端跳转和服务器首次匹配若走不同逻辑，URL→组件映射就会错位。比如Vue Router里用了history模式但服务端没配fallback，或Next.js里getServerSideProps读的是req.url而前端路由用useRouter().asPath，两者值可能不一致。
- Vue项目中，确保
createRouter的routes数组由单个JS模块导出，服务端和客户端都import它，不要在服务端单独写一套matchPath - Next.js项目中，所有页面级数据获取函数（
getServerSideProps、getStaticProps）必须和pages/或app/目录结构严格对齐；app/路由下避免混用generateStaticParams和dynamic = "force-dynamic"，否则服务端无法确定是否该预渲染 - 错误现象：
404或Hydration mismatch警告，本质是服务端渲染了A组件，客户端激活时却挂载了B组件
asyncData或fetch调用必须能在Node环境执行且不依赖浏览器API
服务端没有window、document、localStorage，也没有真实的fetch（除非显式polyfill）。很多团队把客户端的数据请求逻辑直接搬过去，结果服务端报ReferenceError: window is not defined或静默失败。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- Vue项目中，
asyncData或serverPrefetch钩子内禁止出现document.querySelector、localStorage.getItem；HTTP请求统一走axios或node-fetch，并传入{ headers: { cookie: req.headers.cookie } }透传登录态 - React+Next.js中，
getServerSideProps里只能用fetch（Vercel已polyfill）或axios；不能调用自定义Hook（如useAuth），因为Hook依赖useState等客户端专属API - 容易踩的坑：在服务端调用
new URL(...)时传入相对路径（如/api/user），Node会报错；必须拼成完整URL（https://api.example.com/api/user）或通过process.env.NEXT_PUBLIC_API_BASE注入
window.__INITIAL_STATE__注入必须完整、可解析，且客户端store需主动还原
服务端渲染完HTML后，若只把store.state序列化进<script></script>，但客户端启动时不读取它，那服务端的数据就彻底丢了——用户看到的是服务端HTML，但交互时又去拉一遍数据，首屏优势归零。
立即学习“前端免费学习笔记（深入）”；
- Vue项目中，服务端用
renderer.renderToString(app, context)后，从context.state取值，写入HTML模板：<script>window.__INITIAL_STATE__ = ${JSON.stringify(context.state)}</script>；客户端入口需在创建store前执行const state = window.__INITIAL_STATE__ || {}，再传给new Vuex.Store({ state }) - Next.js中，
getServerSideProps返回的props会自动注入页面组件，但若用Redux/Zustand等状态库，仍需手动将props.initialState传入store，并在getInitialProps中处理hydration逻辑 - 性能影响：
JSON.stringify大对象会阻塞服务端渲染；建议对非首屏必需字段做delete state.unusedKey精简，或用serialize-javascript替代原生JSON.stringify防XSS
最常被忽略的一点：动态<title>和<meta name="description">必须由服务端写入HTML，而不是靠document.title = xxx在客户端改。爬虫不执行JS，它只认源码里那一行<title>产品详情 - XX商城</title>。这个细节卡住90%的SEO上线效果。
