前端里的 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 = "提前做好盒饭直接发"