在Web 前端开发语境下，SSR和SSG是两种主流的页面渲染技术，主要用于解决传统客户端渲染（CSR）的首屏加载慢与 SEO 不友好问题。
一、SSR (Server-Side Rendering) —— 服务端渲染
定义：在用户请求时，由服务器动态生成完整的 HTML 页面并返回给浏览器。
工作流程：
- 用户访问 URL → 2. 服务器获取数据 → 3. 服务器渲染组件为 HTML → 4. 返回完整 HTML 给浏览器 → 5. 浏览器显示内容（首屏快）→ 6. 加载 JS，激活交互（Hydration）
优点：
- 首屏加载极快：用户直接看到完整页面，无白屏等待
- SEO 友好：搜索引擎爬虫可直接获取完整页面内容
- 适配弱网 / 低配设备：客户端压力小
缺点：
- 服务器压力大：每次请求都要重新渲染，高并发易成瓶颈
- 开发 / 部署复杂：需处理服务端与客户端的环境差异
- 交互有延迟：页面显示后，需等 JS 加载完成才能交互
代表框架：Next.js (React)、Nuxt.js (Vue)、SvelteKit
二、SSG (Static Site Generation) —— 静态站点生成
定义：在项目构建 / 部署时，就预先将所有页面渲染为静态 HTML 文件。用户访问时，服务器直接返回已生成的文件。
工作流程：
- 开发 / 构建时 → 2. 获取所有数据 → 3. 预渲染所有页面为静态 HTML → 4. 部署到服务器 / CDN → 5. 用户请求时，直接返回静态文件
优点：
- 访问速度最快：纯静态文件，可极致 CDN 加速
- 服务器负载极低：无需实时计算，成本低、抗并发
- 安全性高：无动态脚本，减少攻击面
- SEO 友好：同 SSR，爬虫可获取完整内容
缺点：
- 内容更新麻烦：内容变更需重新构建、部署整个站点
- 不适合高度动态内容：如实时数据、用户个性化页面
代表框架：Gatsby、Next.js (支持 SSG)、Nuxt.js (支持 SSG)、Hugo
三、核心对比（SSR vs SSG）
表格
| 特性 | SSR (服务端渲染) | SSG (静态生成) |
|---|---|---|
| 渲染时机 | 用户请求时 (动态) | 项目构建时 (预先生成) |
| 首屏速度 | 快 | 极快 |
| 服务器压力 | 高 | 极低 |
| 内容实时性 | 高 (可随时更新) | 低 (需重新部署) |
| 开发难度 | 较高 | 较低 |
| 适用场景 | 电商、新闻、动态内容 | 博客、文档、营销页、内容固定站 |
简单来说：SSR 适合内容常变的动态站，SSG 适合内容稳定的静态站。
