frontend-interview-playbook

Appearance

SSR、CSR 与 Hydration：首屏、交互与渲染模式差异 ​

主题定位 ​

渲染模式选择的关键不是“谁更快”，而是哪一段工作放在服务器，哪一段留给浏览器。

  • 渲染模式选择的关键不是“谁更快”，而是哪一段工作放在服务器，哪一段留给浏览器
  • CSR、SSR、SSG、流式 SSR、岛屿架构本质上都是渲染职责切分方案
  • Vue 生态中的 SSR 还要额外考虑服务端数据获取、客户端 hydration 和路由状态同步
  • 依赖 window、随机数、时区、本地存储或不稳定异步顺序的代码都可能制造 hydration mismatch

渲染模式拆分 ​

CSR ​

CSR 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 CSR 的差异最终会体现在 应用分层、渲染模式、构建链路 这几个维度。 CSR 讲清适用边界、失效条件和代价结构，结论才有技术含量。

SSR ​

SSR 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 SSR 的差异最终会体现在 应用分层、渲染模式、构建链路 这几个维度。 SSR 讲清适用边界、失效条件和代价结构，结论才有技术含量。

Hydration ​

Hydration 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 Hydration 的差异最终会体现在 应用分层、渲染模式、构建链路 这几个维度。 Hydration 讲清适用边界、失效条件和代价结构，结论才有技术含量。

首屏、交互与成本对照 ​

  • 渲染模式选择的关键不是“谁更快”，而是哪一段工作放在服务器，哪一段留给浏览器
  • CSR、SSR、SSG、流式 SSR、岛屿架构本质上都是渲染职责切分方案
  • Vue 生态中的 SSR 还要额外考虑服务端数据获取、客户端 hydration 和路由状态同步
  • 依赖 window、随机数、时区、本地存储或不稳定异步顺序的代码都可能制造 hydration mismatch
  • CSR 首次只返回文档壳与脚本，内容生成依赖浏览器执行；SSR 在服务端先生成 HTML，再由客户端接管事件绑定与后续更新
  • Hydration 会让客户端运行同样的组件树，逐步把现有 DOM 与虚拟节点对应起来并挂接事件

选型建议与约束 ​

  • 渲染模式选择的关键不是“谁更快”，而是哪一段工作放在服务器，哪一段留给浏览器
  • CSR、SSR、SSG、流式 SSR、岛屿架构本质上都是渲染职责切分方案
  • Vue 生态中的 SSR 还要额外考虑服务端数据获取、客户端 hydration 和路由状态同步
  • 依赖 window、随机数、时区、本地存储或不稳定异步顺序的代码都可能制造 hydration mismatch
  • CSR 首次只返回文档壳与脚本，内容生成依赖浏览器执行；SSR 在服务端先生成 HTML，再由客户端接管事件绑定与后续更新

问答设计及延伸 ​

标准回答 ​

回答 SSR、CSR 与 Hydration：首屏、交互与渲染模式差异 时，先定义 CSR、SSR、Hydration 各自解决的问题，再比较它们在 应用分层、渲染模式、构建链路 上的差异，最后给出选型边界和工程代价。

追问拆解 ​

  • SSR、CSR 与 Hydration：首屏、交互与渲染模式差异 与“Vue Router：路由匹配、导航守卫与异步页面切换”的边界关系
  • SSR、CSR 与 Hydration：首屏、交互与渲染模式差异 与“KeepAlive：缓存组件实例而不是缓存 DOM 截图”的边界关系
  • 跨标签页、跨域、多端协作场景下的结论变化
  • 维护成本上升后的优先级调整

容易失分的点 ​

  • 只给“哪个好”的结论，不先拆对象
  • 只报 API 或术语，不解释运行时行为和代价
  • 缺少真实场景，导致结论过度绝对

项目映射 ​

  • 结合真实系统说明 CSR 到 Hydration 分别落在哪段链路
  • 补充未选方案的放弃原因和约束差异
  • 补充线上问题、治理动作和验证结果

相关主题 ​