[!info] related notes

• 所属 MOC: 前端基础 MOC, 前端工程化 MOC
• 前置概念: 路由
• 并列概念: 服务端渲染（SSR）, 静态站点生成（SSG）
• 易混淆概念: SPA vs MPA, hydration
• 关系笔记: CSR、SSR 与 SSG

客户端渲染（CSR）

一句话定义

CSR（Client-Side Rendering）是浏览器先拿到一个较轻的 HTML 外壳和 JavaScript，再由客户端拉取数据、生成页面内容并负责后续更新的渲染方式。

核心内容

• 服务器通常先返回入口 HTML、静态资源地址和 API 能力
• 浏览器下载并执行 JavaScript 后，前端应用才真正生成主要页面内容
• 后续路由切换、状态更新、组件重渲染主要发生在客户端
• 因为首屏更依赖 JavaScript 下载、解析和执行，所以包体积和主线程压力会直接影响首屏体验

最小例子

• 一个典型 SPA 首次访问时，服务端先返回 index.html
• HTML 里通常只有根节点和脚本引用
• React 或 Vue 应用在浏览器启动后再请求数据，并把商品列表、后台仪表盘或详情区域渲染出来

边界与易混淆点

• CSR 不等于 SPA。SPA 常采用 CSR，但同一个应用也可以在部分路由里配合 SSR 或 SSG
• CSR 不是“完全没有 HTML”，而是初始 HTML 更多只是应用壳子，主要内容在浏览器里完成
• CSR 默认不涉及 hydration；hydration 更常见于 SSR 或 SSG 已经先输出 HTML 的场景
• 高交互后台、登录后控制台、强个性化页面更常见 CSR

面试要点

来自 csr-vs-ssr-vs-ssg-interview-question 的面试视角整理。

一句话回答

CSR 是浏览器拿到 JavaScript 后再生成页面，SSR 是请求时由服务端先生成 HTML，SSG 是构建时提前生成 HTML；三者本质上是在首屏体验、内容更新方式和系统复杂度之间做权衡。

最稳的回答主线

• 先说生成时机：浏览器生成、请求时生成、构建时生成
• 再说首屏和 SEO：SSR、SSG 通常更容易直出内容
• 再说成本：SSR 需要服务端渲染链路，SSG 更依赖构建产物和发布策略
• 最后说选型：高交互后台常见 CSR，内容站点更常见 SSR 或 SSG

一个更稳的表达顺序

1. 先一句话下定义：谁在什么时候生成 HTML
2. 再讲权衡：首屏、SEO、数据新鲜度、系统复杂度
3. 最后补选型：按页面类型选，不要把整站强行归成一种模式

面试里容易加分的一句

SSR 和 SSG 不是不要前端渲染，而是先把首屏 HTML 提前准备出来，后面通常还要经历 hydration 才能真正接管交互。

常见追问

• SSR 一定比 CSR 快吗
• SSG 和纯静态网站有什么关系
• 什么场景下不适合 SSR
• 为什么用了 SSR 页面还要下载不少 JavaScript
• SPA 和 CSR 是不是一回事

最短记忆方式

CSR 在浏览器生成，SSR 在请求时生成，SSG 在构建时生成。

Related notes

• SSR vs CSR
• CSR、SSR 与 SSG
• SPA vs MPA
• Hydration