SSR vs SSG 区别详解

一、基本概念

1. SSR（服务端渲染）

• 定义：在每次用户请求页面时，服务器都会执行渲染逻辑，把 HTML 生成好再返回给浏览器。

• 特点：

  • 每次请求都动态生成 HTML。

  • 用户第一次打开页面时能直接看到完整内容（利于 SEO）。

  • 页面可能会根据用户请求参数、登录状态等返回不同的内容。

2. SSG（静态站点生成）

• 定义：在构建阶段（build 时）就把所有页面生成成静态 HTML 文件，部署后用户请求时直接返回。

• 特点：

  • 页面是 预先生成的静态文件，用户请求时不需要服务器计算。

  • 加载速度快，CDN 缓存友好。

  • 适用于内容变化不频繁的网站（比如博客、文档站）。

---

二、工作流程对比

特性	SSR（Server-Side Rendering）	SSG（Static-Site Generation）
渲染时机	请求时：每次请求都在服务器上渲染	构建时：打包时一次性生成 HTML
响应速度	较慢（需要计算和数据库请求）	极快（直接返回静态文件，可走 CDN 缓存）
动态内容	支持动态数据（如登录、个性化推荐）	不适合动态数据（除非配合 CSR/ISR）
SEO	好（直接返回 HTML）	好（页面是静态 HTML）
适用场景	电商、用户中心、后台管理系统、动态内容平台	博客、文档站、官网、内容固定的营销页面

---

三、延伸：ISR（增量静态生成）

• 定义：在 SSG 的基础上引入“过期刷新”机制，静态页面一旦过期，会在后台重新生成新版本。

• 优点：既保留了 SSG 的性能优势，又能保证内容不是一成不变的。

• 应用场景：新闻站点、产品列表页面。

---

四、类比理解

• SSR：像餐厅现点现做，顾客点菜后才开始做饭，保证新鲜但速度慢。

• SSG：像餐厅提前做好自助餐，顾客来就直接取，速度快但不够灵活。

• ISR：自助餐 + 定时更新，过了时效会再做一锅新鲜的。

---

五、实际选择建议

• 用 SSR 的情况：

  • 页面依赖实时数据（例如：股票行情、电商库存）。

  • 页面需要根据用户权限、登录状态动态变化。

• 用 SSG 的情况：

  • 博客、文档、产品官网等静态内容为主。

  • SEO 要求高但数据更新不频繁。

• 用 ISR 的情况：

  • 需要静态站点的性能，但内容更新频繁（新闻、博客订阅）。