#SSR vs SSG 区别详解

#一、基本概念

#1. SSR（服务端渲染）

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

• 特点：

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

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

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

#2. SSG（静态站点生成）

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

• 特点：

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

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

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

#二、工作流程对比

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

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

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

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

#四、类比理解

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

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

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

#五、实际选择建议

• 用 SSR 的情况：

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

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

• 用 SSG 的情况：

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

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

• 用 ISR 的情况：

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