前端里的 SSR（Server-Side Rendering） 和 SSG（Static Site Generation） 本质都是“提前把页面 HTML 准备好”，但它们的生成时机和适用场景完全不同。
一句话区别
- SSR：每次请求都在服务器实时生成 HTML
- SSG：构建时一次性生成 HTML，之后直接复用
1. SSR（服务端渲染）
工作方式
用户请求页面 → 服务器执行前端代码 → 生成 HTML → 返回浏览器
特点
- 每次请求都会执行一次渲染
- 可以拿到最新数据
- 首屏速度快（比纯 CSR 好）
- 服务器压力较大
适用场景
- 数据强实时性（如订单、用户中心）
- SEO 要求高 + 内容经常变化
- 权限相关页面（根据用户不同渲染不同内容）
举例
比如电商商品页库存实时变化，就适合 SSR
2. SSG（静态生成）
工作方式
构建阶段（build）就把页面 HTML 生成好 → 部署 → 用户直接拿静态文件
特点
- 不需要服务器实时计算
- 极快（CDN 直接返回 HTML）
- 成本低、稳定性高
- 数据不是实时的（需要重新 build 或增量更新）
适用场景
- 内容不常变
- 强 SEO（博客、官网、文档）
- 营销页面
举例
博客文章、官网介绍页
3. 核心对比
| 维度 | SSR | SSG |
|---|---|---|
| 生成时机 | 请求时 | 构建时 |
| 数据实时性 | 高 | 低 |
| 性能 | 中（依赖服务器） | 极高（CDN） |
| 成本 | 高 | 低 |
| SEO | 好 | 好 |
| 适合场景 | 动态数据 | 静态内容 |
4. 框架里的体现（你做前端会很常见）
React生态
- SSR：Next.js 的
getServerSideProps - SSG：Next.js 的
getStaticProps
Vue生态
- SSR：Nuxt 的
server模式 - SSG：Nuxt 的
generate/nuxt build --prerender
5. 实际开发中的一个关键认知
很多项目不是二选一，而是混合模式（Hybrid Rendering） ：
- 首页：SSG（快）
- 商品页：SSR（实时）
- 用户页：CSR（纯前端）
像 Next.js / Nuxt 现在都是这种“按页面选择渲染策略”。
6. 一个更本质的理解
你可以这样记：
- SSR = “每次现做一份热菜”
- SSG = “提前做好盒饭直接发”
