Next.js 中的 SSR、SSG 和 ISR 有什么区别？ - 面试题

Next.js 中有三种主要的渲染方式，每种方式都有其特定的使用场景和优势：

1. 客户端渲染（CSR）

客户端渲染是传统的 React 应用渲染方式。页面初始加载时返回一个空的 HTML 文件，然后 JavaScript 在浏览器中执行，动态生成页面内容。

特点：

首屏加载较慢，需要等待 JavaScript 下载和执行
SEO 不友好，搜索引擎爬虫可能无法抓取动态内容
交互性强，适合高度交互的应用
适合不需要 SEO 的后台管理系统、仪表盘等

实现方式：

javascript
export default function CSRPage() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  
  return <div>{data ? data.content : 'Loading...'}</div>;
}

2. 服务器端渲染（SSR）

服务器端渲染在每次请求时，服务器会生成完整的 HTML 并发送给客户端。这样可以确保搜索引擎爬虫能够抓取到完整的内容。

特点：

首屏加载快，HTML 已经在服务器上生成
SEO 友好，搜索引擎可以抓取完整内容
每次请求都需要服务器处理，服务器负载较高
适合内容频繁变化、需要 SEO 的页面

实现方式：

javascript
export async function getServerSideProps(context) {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { props: { data } };
}

export default function SSRPage({ data }) {
  return <div>{data.content}</div>;
}

3. 静态生成（SSG）

静态生成在构建时生成 HTML 文件，这些文件可以被 CDN 缓存，提供最快的加载速度。

特点：

性能最佳，HTML 文件可以被 CDN 缓存
SEO 友好，静态内容易于搜索引擎抓取
构建时生成，内容更新需要重新构建
适合内容不经常变化的页面，如博客、产品页面等

实现方式：

javascript
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { 
    props: { data },
    revalidate: 60 // 可选：启用 ISR，每 60 秒重新生成
  };
}

export default function SSGPage({ data }) {
  return <div>{data.content}</div>;
}

4. 增量静态生成（ISR）

ISR 是 SSG 的增强版本，允许在构建后更新静态页面。它结合了 SSG 的性能和 SSR 的动态性。

特点：

保持静态页面的性能优势
可以在后台更新页面内容
用户总是看到最新的内容
适合需要定期更新但不需要实时更新的内容

实现方式：

javascript
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { 
    props: { data },
    revalidate: 3600 // 每小时重新生成一次
  };
}

选择建议

CSR：后台管理系统、仪表盘、不需要 SEO 的应用
SSR：需要 SEO 且内容频繁变化的页面，如新闻网站、电商产品页
SSG：内容不经常变化的页面，如博客、文档、关于我们页面
ISR：需要定期更新但不需要实时更新的内容，如博客文章、产品列表

在实际项目中，可以根据不同页面的需求混合使用这些渲染方式，以达到最佳的性能和 SEO 效果。