第五章：Next.js 渲染和部署

增量静态再生 (ISR)

什么是 ISR？

增量静态再生（Incremental Static Regeneration，ISR）是 Next.js 提供的一种混合渲染策略，允许开发者在构建后动态更新静态页面。它结合了静态站点生成（SSG）和服务器端渲染（SSR）的优势，既保证了页面的加载速度，又能实现内容的动态更新。

ISR 的工作原理

  1. 初始生成：页面在构建时预渲染为静态 HTML（类似 SSG）。
  2. 按需更新：当用户请求页面时，Next.js 会在后台检查页面是否需要更新：
    • 如果页面未过期，直接返回缓存的静态内容。
    • 如果页面已过期（基于配置的 revalidate 时间），Next.js 会重新生成页面并更新缓存。
  3. 无缝切换：用户始终看到最新内容，无需感知后台的重新生成过程。

如何使用 ISR？

在 getStaticProps 中通过 revalidate 参数启用 ISR：

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 60, // 页面最多每 60 秒重新生成一次
  };
}

ISR 的优势

  1. 高性能：用户首次访问时加载静态内容，后续请求快速响应。
  2. 动态性：无需重新部署即可更新内容。
  3. 灵活性：可针对不同页面设置不同的 revalidate 时间。
  4. 容错性：如果后台更新失败，仍会返回旧的缓存内容。

ISR 的适用场景

  • 内容频繁更新的博客或新闻网站
  • 电商产品页面
  • 需要结合动态数据的营销页面

注意事项

  1. CDN 缓存：ISR 依赖 CDN 缓存，需确保部署平台支持。
  2. 更新延迟：内容更新可能有 revalidate 时间间隔的延迟。
  3. 流量激增：大量过期页面的并发再生可能导致服务器压力。

示例：实现带 ISR 的博客页面

// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id },
  }));

  return { paths, fallback: 'blocking' };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: { post },
    revalidate: 10, // 每 10 秒最多更新一次
  };
}

ISR 是 Next.js 最强大的功能之一，合理使用可以显著提升应用性能和开发效率。

Last Updated::