SSG 概念与适用场景
静态站点生成在构建时渲染所有页面，输出静态 HTML 文件。
SSG 原理
Bash
构建时 → 预渲染所有页面 → 输出静态 HTML → 部署到 CDN
SSG 与 SSR 区别
| 对比项 | SSG | SSR |
|---|---|---|
| 渲染时机 | 构建时 | 请求时 |
| 产物类型 | 静态 HTML | 动态 HTML |
| 服务器 | 无需 Node.js | 需要 Node.js |
| 内容更新 | 需重新构建 | 实时更新 |
适用场景
| 场景 | 适合 SSG |
|---|---|
| 博客 | ✓ 内容固定 |
| 文档站 | ✓ 频率低更新 |
| 官网 | ✓ SEO 需求 |
| 电商 | ✗ 动态内容 |
| 社交 | ✗ 实时交互 |
注意：SSG 适合内容相对固定、SEO 要求高的场景。
SSG 优势
- SEO 极佳：纯静态 HTML，搜索引擎完美抓取
- 性能极高：CDN 直接分发，无服务器延迟
- 成本低廉：无需服务器，静态托管即可
- 安全可靠：无服务器端逻辑，攻击面小
SSG 限制
- 构建时间长：大量页面需预渲染
- 更新不即时：内容更新需重新构建部署
- 不适合动态：用户相关内容无法预渲染
常用 SSG 工具
| 工具 | 框架支持 | |
|---|---|---|
| VitePress | Vue | |
| Next.js | React | |
| Astro | 多框架 | |
| Nuxt Content | Vue |
VitePress 示例
text
# 安装 VitePress
npm add -D vitepress
# 创建文档站
npx vitepress init
要点总结
- SSG 构建时预渲染生成静态 HTML
- 适合博客、文档等固定内容场景
- SEO 友好、性能高、成本低
- 不适合频繁更新和动态内容
📝 发现内容有误？点击此处直接编辑