渲染模式
约 769 字大约 3 分钟
2025-12-10
问题
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) | 高(每次请求渲染页面) | 无(静态文件托管) |
| 内容更新频率 | 实时动态 | 实时动态 | 固定(需重新构建) |