Next.js 系列之的SSG、SSR、ISR、CSR 的详细介绍和区别
date
Apr 7, 2025
AI 摘要
slug
nextjs-series-difference-between-ssg-ssr-isr-and-csr-in-nextjs
status
Published
tags
front-end
summary
Next.js 提供了多种渲染策略（SSG、SSR、ISR、CSR），每种策略适用于不同的场景。以下是它们的核心区别、实现方式及最佳实践。- SSG：优先用于内容稳定、SEO 关键的页面。- SSR：用于实时数据或个性化内容。- ISR：平衡速度与更新频率，适合大规模内容站点。- CSR：用于交互复杂、无需 SEO 的功能模块。- 混合使用：结合不同策略，最大化性能与功能灵活性。
type
Post
Next.js 提供了多种渲染策略（SSG、SSR、ISR、CSR），每种策略适用于不同的场景。以下是它们的核心区别、实现方式及最佳实践：
1. SSG（Static Site Generation，静态生成）
核心特点
- 生成时机：在构建时（
next build）生成静态 HTML。
- 数据获取：通过
getStaticProps获取数据，支持预渲染所有页面。
- 适用场景：内容不经常变化的页面（如博客、文档、营销页）。
- 优点：加载最快、SEO 友好、CDN 缓存友好。
- 缺点：无法实时更新内容，需重新构建才能更新。
实现代码
2. SSR（Server-Side Rendering，服务端渲染）
核心特点
- 生成时机：每次页面请求时在服务端动态生成 HTML。
- 数据获取：通过
getServerSideProps在请求时获取最新数据。
- 适用场景：需要实时数据的页面（如用户仪表盘、实时股价）。
- 优点：内容始终最新，支持个性化渲染（如基于 Cookie 的权限验证）。
- 缺点：TTFB（首字节时间）较慢，服务端压力大。
实现代码
3. ISR（Incremental Static Regeneration，增量静态再生）
核心特点
- 生成时机：SSG 的扩展，允许在运行时按需重新生成静态页面。
- 数据获取：在
getStaticProps中设置revalidate参数（秒），触发条件： • 初次访问时生成静态页面。 • 后续访问时，若超过revalidate时间，后台重新生成页面。
- 适用场景：内容更新频率适中的页面（如电商产品页、新闻列表）。
- 优点：兼具 SSG 的速度和 SSR 的更新能力，减轻服务端压力。
- 缺点：再生成期间用户可能看到旧数据。
实现代码
4. CSR（Client-Side Rendering，客户端渲染）
核心特点
- 生成时机：在客户端浏览器中通过 JavaScript 渲染内容。
- 数据获取：通过
useEffect或SWR在组件挂载后获取数据。
- 适用场景：交互性强、无需 SEO 的页面（如用户后台、管理面板）。
- 优点：减少服务端负载，支持动态交互。
- 缺点：首屏加载慢，SEO 不友好，依赖客户端 JavaScript。
实现代码
5. 对比表格
特性 | SSG | SSR | ISR | CSR |
生成时机 | 构建时 | 每次请求时 | 构建时 + 按需再生 | 客户端运行时 |
数据实时性 | 低（需重新构建） | 高（实时） | 中等（可配置更新间隔） | 高（动态获取） |
SEO 支持 | ✅ 最佳 | ✅ 良好 | ✅ 良好 | ❌ 差（需额外处理） |
首屏加载速度 | ⚡️ 最快 | ⏳ 较慢（依赖服务端） | ⚡️ 快（缓存优先） | ⏳ 慢（需加载 JS） |
适用场景 | 静态内容 | 实时数据 | 频繁更新但非实时内容 | 交互复杂、无需 SEO |
服务端压力 | 无 | 高 | 低 | 无 |
6. 混合使用策略
Next.js 允许在同一个项目中灵活组合多种渲染方式：
• SSG + CSR：首屏静态渲染，交互部分客户端加载（如博客的评论模块）。
• SSR + ISR：动态页面初次 SSR，后续通过 ISR 缓存（如新闻详情页）。
• App Router 优化：在
app 目录中，使用 React Server Components 减少客户端 JS 体积。示例：混合 SSG 和 CSR
7. 选择策略的决策树
- 是否需要 SEO？ • ✅ 是 → 使用 SSG、SSR 或 ISR。 • ❌ 否 → 使用 CSR。
- 数据是否频繁更新？ • ✅ 是 → 使用 SSR 或 ISR。 • ❌ 否 → 使用 SSG。
- 是否有个性化内容？ • ✅ 是 → 使用 SSR。 • ❌ 否 → 使用 SSG 或 ISR。
总结
- SSG：优先用于内容稳定、SEO 关键的页面。
- SSR：用于实时数据或个性化内容。
- ISR：平衡速度与更新频率，适合大规模内容站点。
- CSR：用于交互复杂、无需 SEO 的功能模块。
- 混合使用：结合不同策略，最大化性能与功能灵活性。