问题

SPA、SSR、SSG 有什么区别？

---

SPA、SSR 和 SSG 是现代 Web 中常见的三种渲染模式，它们分别代表 单页应用（Single Page Application）、服务端渲染（Server-Side Rendering）和 静态站点生成（Static Site Generation）。

SPA

SPA 是一种基于前端框架（如 Vue、React、Angular）构建的应用程序，只有一个HTML文件，页面的所有内容通过 JavaScript 动态加载，用户与页面交互时无需刷新整个页面。

特点：

• 优点：
  • 用户体验流畅：页面切换快，无需重新加载。
  • 前后端分离：前端专注于 UI，后端提供 API 数据接口。
  • 开发效率高：适合复杂交互的应用。
• 缺点：
  • 首屏加载时间较长：需要下载大量 JavaScript 文件。
  • SEO 不友好：搜索引擎爬虫可能无法正确抓取动态生成的内容。
  • 对浏览器性能要求较高。

使用场景：

• 需要高度交互的 Web 应用，例如仪表盘、管理后台。
• 内部工具或需要频繁更新状态的应用。

SSR

SSR 是一种在服务器端渲染 HTML 的技术。服务器根据请求生成完整的 HTML 页面，并将其发送给客户端。

特点：

• 优点：
  • 首屏加载速度快：HTML 已经由服务器生成，浏览器直接渲染。
  • SEO 友好：搜索引擎可以轻松抓取完整的 HTML 内容。
  • 更好的用户体验：初次访问时内容立即可见。
• 缺点：
  • 服务器负载较高：每次请求都需要服务器生成页面。
  • 开发复杂度增加：需要处理前后端的协作逻辑。
  • 客户端交互能力依赖前端框架。

使用场景：

• 需要良好 SEO 的网站，例如博客、新闻门户、电商网站。
• 首屏内容对用户体验至关重要的场景。

SSG

SSG 是一种在构建时生成静态 HTML 文件的技术。这些文件可以直接部署到 CDN 上，供用户访问。

特点：

• 优点：
  • 性能最佳：静态文件可以直接从 CDN 提供，加载速度极快。
  • 成本低：无需动态服务器支持，只需托管静态文件。
  • SEO 友好：静态文件包含完整的 HTML 内容。
• 缺点：
  • 内容更新不灵活：每次更新内容都需要重新构建和部署。
  • 不适合动态数据：如果数据频繁变化，SSG 不是最佳选择。

使用场景：

• 内容相对固定的网站，例如文档站点、博客、公司官网，如 VuePress 等。
• 需要高性能和低成本的项目。

对比

特性	SPA	SSR	SSG
首屏加载速度	较慢（需加载 JS）	快（HTML 已生成）	极快（静态文件直接提供）
SEO 支持	较差（需额外优化）	良好	良好
开发复杂度	中等	较高	较低
服务器负载	低（仅提供 API）	高（每次请求渲染页面）	无（静态文件托管）
内容更新频率	实时动态	实时动态	固定（需重新构建）