SSG与SSR区别
SSG（静态站点生成） 和 SSR（服务端渲染） 是两种主流的前端渲染技术，核心区别在于 HTML 生成的时机 和 数据处理方式。以下是详细对比：
一、核心区别对比表
| 特性 | SSG（静态站点生成） | SSR（服务端渲染） |
|---|---|---|
| HTML 生成时机 | 构建时（Build Time）生成静态 HTML 文件 | 请求时（Request Time）动态生成 HTML |
| 数据依赖性 | 依赖构建时已知的数据（如 Markdown、API 快照） | 依赖实时数据（每次请求动态获取） |
| 更新频率 | 需要重新构建才能更新内容 | 实时更新（每次请求都是最新数据） |
| 性能（首屏加载） | 极快（直接返回静态文件） | 较快（需等待服务器处理） |
| 服务器成本 | 极低（可托管在 CDN） | 较高（需持续运行服务器） |
| SEO 友好度 | 优秀（静态 HTML 直接被搜索引擎抓取） | 优秀（服务器返回完整 HTML） |
| 适用场景 | 内容型网站（博客、文档、电商商品页） | 数据实时变化的应用（社交媒体、管理后台） |
二、工作流程差异
1. SSG 工作流程
1. 构建阶段：
├─ 获取数据（如 API、Markdown 文件）
├─ 渲染组件为 HTML（每个路由生成独立文件）
└─ 输出静态文件（如 index.html, about.html）
2. 请求阶段：
└─ 直接返回预先生成的 HTML 文件（无需服务器处理）
2. SSR 工作流程
1. 请求阶段：
├─ 客户端发送请求
├─ 服务器获取实时数据（如数据库、API）
├─ 动态渲染组件为 HTML
├─ 返回 HTML 到客户端
└─ 客户端 hydration（绑定 JavaScript 事件）
三、典型框架支持
| 框架 | SSG 支持 | SSR 支持 |
|---|---|---|
| Next.js | getStaticPaths/getStaticProps | getServerSideProps |
| Nuxt.js | generate 命令 | asyncData/fetch |
| Gatsby | 默认支持 | 需插件（如 gatsby-plugin-ssr） |
| Angular | Angular Universal | Angular Universal |
四、性能与成本对比
1. 性能
- SSG：首屏加载最快（直接 CDN 返回静态文件），无需等待服务器处理。
- SSR：需等待服务器渲染，但比客户端渲染（CSR）快（无需先加载 JavaScript）。
2. 成本
- SSG：成本极低（静态文件可托管在 CDN，如 GitHub Pages、Vercel）。
- SSR：需持续运行服务器（如 Node.js 实例），成本较高。
五、适用场景
1. SSG 适合：
- 内容型网站（博客、文档、企业官网）
- 电商商品页（数据更新频率低）
- 需要极致 SEO 的场景
- 静态资源为主，动态交互少的应用
2. SSR 适合：
- 数据实时变化的应用（社交媒体、新闻 Feed）
- 用户个性化内容（如 Dashboard）
- 需要频繁更新的内容（如库存状态）
- 动态路由多且无法提前生成的场景
六、混合方案：ISR（增量静态再生）
为了平衡 SSG 和 SSR 的优势，部分框架（如 Next.js、Nuxt3）支持 ISR：
- 原理：静态生成页面，但允许在运行时定期或触发式更新。
- 适用场景：内容需要更新，但不需要实时更新（如博客文章、商品列表）。
// Next.js ISR 示例
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: { posts },
revalidate: 60 * 60, // 每小时重新生成一次
};
}
七、总结
| 需求点 | SSG 更优 | SSR 更优 |
|---|---|---|
| 性能 | 静态内容加载极快 | 动态内容实时性好 |
| 成本 | 几乎为零 | 需要服务器资源 |
| 开发复杂度 | 低（无需管理服务器） | 高（需处理服务器状态） |
| 数据更新频率 | 低 | 高 |
建议组合使用：对静态内容（如商品页、博客）使用 SSG，对动态内容（如用户评论、实时数据）使用 SSR 或客户端渲染。
