题目
Next.js 中静态生成(SSG)与服务器端渲染(SSR)的区别及适用场景
信息
- 类型：问答
- 难度：⭐⭐
考点
渲染策略理解, 性能优化, 场景决策
快速回答
静态生成(SSG)和服务器端渲染(SSR)是Next.js的核心渲染策略：
- SSG：在构建时生成HTML，适用于内容不变的页面
- SSR：在每次请求时生成HTML，适用于动态内容页面
- 选择依据：根据数据更新频率、性能需求和SEO要求决定
1. 核心原理对比
静态生成(SSG)：在构建阶段(build time)生成HTML文件，结果被CDN缓存。支持两种数据获取方式：
getStaticProps：构建时获取页面数据getStaticPaths：配合动态路由确定预生成页面
服务器端渲染(SSR)：每次请求时通过getServerSideProps获取数据并生成HTML，无静态缓存。
2. 代码示例对比
SSG 实现示例
// pages/blog/[slug].js
export async function getStaticPaths() {
const res = await fetch('https://.../posts')
const posts = await res.json()
const paths = posts.map(post => ({
params: { slug: post.slug }
}))
return { paths, fallback: 'blocking' }
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://.../posts/${params.slug}`)
const post = await res.json()
return { props: { post }, revalidate: 60 } // 增量静态再生
}SSR 实现示例
// pages/user/[id].js
export async function getServerSideProps(context) {
const { id } = context.params
const res = await fetch(`https://.../users/${id}`)
const user = await res.json()
return { props: { user } }
}3. 最佳实践与场景选择
| 策略 | 适用场景 | 性能特点 |
|---|---|---|
| SSG | 博客/文档/产品列表页 营销页面 数据更新频率低 | ⚡️ TTFB最快 🚀 支持CDN缓存 📈 适合高流量页面 |
| SSR | 用户仪表盘 实时数据页面 个性化内容 | 🔄 每次请求最新数据 ⏱ TTFB较慢 🔒 可访问请求对象 |
4. 混合使用策略
Next.js支持页面级混合渲染：
- 使用
getStaticProps+fallback: true实现动态SSG - 通过
revalidate实现增量静态再生(ISR) - 在SSG页面中使用客户端数据获取补充动态内容
5. 常见错误
- ❌ 在SSG中使用
getServerSideProps - ❌ 对高频更新内容使用SSG而不设置revalidate
- ❌ 在组件层使用数据获取函数（应仅在页面层使用）
- ❌ 忽略SSR的服务器压力问题
6. 性能优化技巧
- 对动态路由使用
fallback: 'blocking'避免404闪烁 - SSG页面使用
revalidate实现定时更新 - 通过
stale-while-revalidate缓存策略平衡新鲜度与性能 - 使用
next/image自动优化图片
7. 扩展知识
- ISR (增量静态再生)：Next.js 9.5+ 特性，允许在构建后更新静态页面
- Edge SSR：Next.js 12+ 支持在边缘网络运行SSR，减少延迟
- React 18 Streaming SSR：支持分块传输和选择性注水
- 数据缓存：结合SWR或React Query优化客户端数据获取
