SSR核心是服务端同步生成带内容的HTML以消除白屏，需确保数据预取、避免服务端过载、保障水合一致性。
服务端渲染（SSR）本身就是为了优化首屏加载速度而设计的，但光用 SSR 不等于首屏就一定快——关键在怎么用、怎么配、怎么减负。
服务端提前吐出完整 HTML 是核心
浏览器一收到响应，就能立刻开始解析和渲染，不用等 JS 下载、执行、再请求 API、再生成 DOM。这直接消除了 CSR 常见的“白屏”或“loading 闪现”。要确保这一点，得确认服务端确实返回了带内容的 HTML（比如打开网页 → 右键“查看页面源代码”，能看到真实文本、图片标签、标题等，而不是只有一个空 <div id="root"></div>）。
数据获取必须在服务端同步完成
SSR 的 HTML 要“有意义”，就得把首屏依赖的数据一起拿到、一起塞进模板里。否则还是空壳。常见做法：
- Next.js 中用
getServerSideProps，每次请求都走一遍数据拉取逻辑 - Vue SSR 项目中，在
serverEntry或路由守卫里调用asyncData方法 - 避免在组件
useEffect或mounted里才去 fetch 首屏数据——那已经晚了，属于 CSR 行为
别让服务端干太多事
SSR 快的前提是服务端渲染够轻、够快。如果每个请求都要查三次数据库、调四个外部接口、再做复杂计算，首屏反而更慢，还容易拖垮服务器。优化方向包括：
- 对非关键数据做降级或延迟加载（比如评论区、用户推荐，可留到客户端再取）
- 静态内容（如页头、页脚、帮助文档）尽量预构建，不走实时 SSR
- 用缓存：接口响应加 CDN 缓存，或服务端本地缓存（如 Redis 存热门商品页 HTML 片段）
- 超时控制：数据接口设 800ms 超时，超时后返回兜底数据，不卡住整个 HTML 生成
客户端水合（Hydration）要轻量且稳定
服务端生成 HTML 后，前端 JS 要“激活”它，这个过程叫水合。如果水合失败或耗时长，页面会卡顿甚至交互失灵。注意：
- 服务端和客户端渲染结果必须一致，否则 React/Vue 会警告并重做 DOM，引发闪烁或性能抖动
- 避免在组件顶层写依赖
window或document的逻辑（服务端没有这些对象） - 大组件考虑用
dynamic import+ssr: false拆分，把水合压力分散开
