目录
一、什么是 CSR（Client-Side Rendering，客户端渲染）
二、什么是 SSR（Server-Side Rendering，服务端渲染）
三、什么是 SSG（Static-Site Generation，静态站点生成）
在前端开发中，“渲染”是绕不开的一个核心话题。随着前端框架（如 React、Vue、Next.js、Nuxt.js）的发展，出现了多种不同的渲染方式，例如 CSR（客户端渲染）、SSR（服务端渲染）、SSG（静态站点生成）。那么它们到底是什么？有什么优缺点？又适合什么场景？本文将带你深入解析。
一、什么是 CSR（Client-Side Rendering，客户端渲染）
定义
CSR 是最常见的渲染模式，页面首次加载时，服务器只返回一个空的 HTML 页面和对应的 JavaScript 脚本文件。真正的页面内容会在浏览器端由 JS 执行、框架运行后再生成。
工作原理
用户访问页面 → 浏览器向服务器请求资源。
服务器返回
index.html（通常只有一个根节点div#app）和打包好的 JS 文件。浏览器下载并执行 JS，框架（Vue/React）在客户端“挂载”应用，生成完整的 DOM。
用户看到最终页面内容。
优缺点
✅ 优点
前后端分离，开发效率高。
页面交互流畅，体验好。
适合复杂的单页应用（SPA）。
❌ 缺点
首屏渲染慢（白屏时间较长）。
SEO 不友好（搜索引擎可能抓不到 JS 渲染后的内容）。
典型应用
Vue、React 的 SPA 项目，大多数后台管理系统。
二、什么是 SSR（Server-Side Rendering，服务端渲染）
定义
SSR 是指由服务端将 HTML 渲染好后直接返回给浏览器，浏览器拿到的就是一个带完整内容的 HTML 文件，再通过前端框架进行“激活”（hydrate）来实现交互。
工作原理
用户访问页面 → 服务器接收请求。
服务器运行框架（如 Next.js、Nuxt.js）生成完整的 HTML。
浏览器接收到 HTML，立即显示内容。
前端 JS 文件下载完成后，对页面进行“激活”，添加交互逻辑。
优缺点
✅ 优点
首屏渲染快，用户体验好。
SEO 友好，爬虫能直接抓取到完整 HTML。
❌ 缺点
服务端压力大，需要运行渲染逻辑。
开发和部署复杂度高。
典型应用
新闻网站、电商平台首页、博客内容页（需要快速首屏和 SEO）。
三、什么是 SSG（Static-Site Generation，静态站点生成）
定义
SSG 可以理解为 SSR 的“预渲染版”。不同的是，它不是在每次请求时都去服务器渲染，而是在构建阶段（build 时）就把页面生成为静态 HTML 文件，部署后直接通过 CDN/静态服务器返回。
工作原理
项目构建时，框架（如 Next.js、Nuxt.js、Gatsby）提前把页面渲染成 HTML 文件。
用户访问时，服务器直接返回静态 HTML，无需额外计算。
前端 JS 下载后，页面具备交互能力。
优缺点
✅ 优点
加载速度极快（CDN 加速 + 静态文件）。
服务端压力小，几乎不需要实时计算。
SEO 友好。
❌ 缺点
不适合频繁变动的数据（因为需要重新构建）。
实时性差。
典型应用
个人博客、文档网站（如 VuePress、Docusaurus）、官网展示页。
四、三者对比一览
| 特性 | CSR（客户端渲染） | SSR（服务端渲染） | SSG（静态站点生成） |
|---|---|---|---|
| 首屏速度 | 慢（白屏） | 快 | 非常快 |
| SEO | 不友好 | 友好 | 友好 |
| 服务端压力 | 小 | 大 | 几乎没有 |
| 实时性 | 高 | 高 | 低（需重新构建） |
| 开发复杂度 | 低 | 高 | 中 |
| 典型场景 | SPA 后台系统 | 电商/新闻首页 | 博客/文档/官网 |
五、如何选择？
如果是 后台管理系统 / 单页应用 → 推荐 CSR，开发快，交互强。
如果是 电商首页 / 新闻门户 / 需要 SEO 的内容站点 → 推荐 SSR。
如果是 个人博客 / 技术文档 / 展示型官网 → 推荐 SSG，轻量高效。
六、总结
CSR：浏览器端渲染，交互强，但首屏慢，SEO 差。
SSR：服务端渲染，首屏快，SEO 好，但增加服务器压力。
SSG：静态站点，速度极快，SEO 友好，但不适合频繁更新。
前端渲染技术并不是“谁更好”，而是要根据业务需求选择合适的方案。实际开发中，很多框架（如 Next.js、Nuxt.js）已经支持 混合渲染模式，让开发者可以根据页面特点灵活选择 CSR、SSR 或 SSG，从而达到最佳效果。