Appearance
SSR、CSR 与 Hydration：首屏、交互与渲染模式差异
主题边界
- CSR、SSR、SSG、流式 SSR、岛屿架构本质上都是渲染职责切分方案。
- Vue 生态中的 SSR 还要额外考虑服务端数据获取、客户端 hydration 和路由状态同步。
机制与流程
- CSR 首次只返回文档壳与脚本，内容生成依赖浏览器执行；SSR 在服务端先生成 HTML，再由客户端接管事件绑定与后续更新。
- Hydration 会让客户端运行同样的组件树，逐步把现有 DOM 与虚拟节点对应起来并挂接事件。
- 如果服务端输出与客户端首次渲染不一致，就会触发 hydration mismatch，轻则重建局部 DOM，重则放弃复用。
关键差异
- SSR 改善的是首屏可见内容与抓取质量，不自动等于更快可交互。
- CSR 部署简单、缓存友好；SSR 更适合内容首屏、SEO 与登录前页面，但服务端成本更高。
边界条件
- 依赖
window、随机数、时区、本地存储或不稳定异步顺序的代码都可能制造 hydration mismatch。 - SSR 下每个请求都要隔离应用实例和 store，否则会出现状态串请求污染。
工程落点
- 渲染模式选择要同时看 TTFB、LCP、TTI、后端负载、缓存策略和页面个性化程度。
- 当页面只需要局部首屏优化时，流式 SSR、组件级异步边界和 Islands 往往比全量 SSR 更划算。