SPA、SSG、SSR的区别
SPA
- 单页面应用，只有一个空HTML页面，如：body只有
<div id="root"></div>，内容全部由JavaScript来控制。 - 优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户。
- 缺点：首屏加载时间长，不利于SEO。
SSG
- 静态网站生成，每次请求都会从服务器获取完整的HTML页面，但是每次请求都会从缓存中获取，不会每次都从服务器获取。
- 优点：首屏加载时间短，利于SEO，用户体验好，SSG应用依然保留了 SPA应用的特性，比如：、、等。
- 缺点： 页面都是静态，不利于展示实时性的内容，实时性的更适合SSR，内容更新了，那必须得重新再次构建和部署。
SSR
- 服务端渲染，每次请求都会从服务器获取完整的HTML页面。
- 优点：首屏加载时间短，利于SEO。
- 缺点：用户体验差，每次都需要从服务器获取完整的 HTML 页面，SSR需要对服务器进行更多API的调用，对服务器压力大。
三者对比
| 特性 | SPA | SSG | SSR |
|---|---|---|---|
| 渲染方式 | 客户端渲染（CSR） | 预渲染（构建时生成静态 HTML） | 服务器端渲染（动态生成 HTML） |
| 首屏加载速度 | 慢（需下载并执行 JavaScript） | 快（直接返回静态 HTML） | 快（服务器生成 HTML） |
| SEO 友好性 | 不友好 | 友好 | 友好 |
| 服务器压力 | 低 | 低 | 高 |
| 交互性 | 强 | 弱 | 中 |
| 适用场景 | 高交互性应用 | 静态内容网站 | 动态内容网站 |
| 常用框架 | React、Vue、Angular | Next、Astro | Next、Nuxt |
如何选择
- ：如果你的应用需要高交互性（如后台管理系统、社交平台），且对 SEO 要求不高。
- ：如果你的网站内容不频繁更新（如博客、文档），且需要快速加载和SEO友好。
- ：如果你的网站内容频繁更新（如新闻、电商），且需要SEO友好和快速首屏加载。
提示
现代框架（如 Next，Nuxt）支持多种渲染方式（SSR、SSG、CSR），可根据需求灵活选择。