SSG 与 SSR 的选择
根据项目特点选择合适的渲染方案，平衡性能、SEO 和开发复杂度。
三种渲染方案对比
| 方案 | 渲染时机 | SEO | 性能 | 复杂度 |
|---|---|---|---|---|
| CSR | 客户端 | 差 | 中 | 低 |
| SSR | 服务端 | 好 | 高 | 中 |
| SSG | 构建时 | 极好 | 极高 | 低 |
选择依据
| 场景 | 推荐 | |
|---|---|---|
| 博客/文档 | SSG | |
| 新闻/资讯 | SSR | |
| 社交/电商 | SSR/CSR | |
| 后台管理 | CSR | |
| 官网/展示 | SSG |
SSG 适用场景
- 内容固定，更新频率低
- SEO 要求高
- 无需服务器部署成本
- 页面数量有限
JavaScript
// SSG 配置
export default defineConfig({
plugins: [ssg({
routes: ['/', '/about', '/docs']
})]
})
注意：大量页面会增加 SSG 构建时间。
SSR 适用场景
- 内容动态，实时更新
- 用户相关内容
- 需要 SEO
- 有 Node.js 服务器
JavaScript
// SSR 配置
export default defineConfig({
ssr: {
noExternal: ['vue-router']
}
})
CSR 适用场景
- 高度交互应用
- 无 SEO 需求
- 后台管理系统
- 实时数据展示
混合渲染方案
| 方案 | 说明 | |
|---|---|---|
| SSR + CSR | 首屏 SSR，后续 CSR | |
| SSG + CSR | 部分页面 SSG，动态页面 CSR | |
| ISR | 增量静态生成，定时更新 |
Nuxt 渲染模式
JavaScript
// Nuxt 支持多种渲染模式
export default defineNuxtConfig({
ssr: true, // SSR
// ssr: false, // CSR
})
要点总结
- SSG 适合固定内容，SEO 极好
- SSR 适合动态内容，SEO 好
- CSR 适合交互应用，无 SEO
- 混合方案平衡性能和需求
