Next.js 中的增量静态再生（ISR）：全面指南

增量静态再生（Incremental Static Regeneration，简称 ISR） 是 Next.js 提供的一项创新功能，它允许开发者在不进行完整构建的情况下，动态更新静态页面。这项技术结合了静态站点生成（SSG） 的高效性与服务器端渲染（SSR） 的动态特性，使其成为现代 Web 开发中的强大解决方案。

什么是增量静态再生（ISR）？

在 Next.js 中，ISR 允许静态页面在初始构建完成后进行更新，而无需重新生成整个网站。它通过后台再生页面内容，确保页面内容保持最新，同时保留静态生成的性能优势。这种方式兼顾了静态站点生成（SSG）和服务器端渲染（SSR）的优点，提供了更灵活的内容更新方案。

ISR 的核心概念

ISR 结合了静态站点生成（SSG） 和 服务器端渲染（SSR） 的特性，以下是它的核心概念：

1. 增量静态再生

ISR 允许静态页面在初始构建后按需更新，只再生有变更的页面，而不影响其他页面的静态内容。

2. revalidate 属性

在 getStaticProps 方法中，revalidate 允许开发者指定一个时间间隔（秒）。每当这个时间间隔过去后，新的请求将触发后台再生。

示例代码：

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

  return {
    props: { data },
    revalidate: 10, // 每 10 秒重新验证并更新页面
  };
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

3. 按需更新内容

页面的再生基于用户请求触发，当 revalidate 时间间隔到达时，首次请求将触发页面的后台更新，更新后的内容将在后续请求中生效。

4. 结合静态与动态内容

ISR 允许预生成静态页面，并在其上动态更新，使网站可以在保证快速加载的同时，保持内容的时效性。

5. 提升性能

通过 ISR，页面默认以静态方式加载，带来更快的访问速度，而后台的增量更新避免了完整构建带来的性能损耗。

6. 增强 SEO

ISR 允许搜索引擎获取完整的 HTML 页面，并且页面内容始终是最新的，有助于提升 SEO 表现。

7. 减少构建时间

由于 ISR 仅更新需要更新的页面，网站不必每次都进行完整构建，这对于大规模站点尤为重要。

ISR 的工作原理

ISR 的核心机制如下：

• 页面在初次构建时被静态生成，并存储为静态 HTML。
• 在 revalidate 设定的时间间隔内，所有访问者都会看到缓存的静态页面。
• 时间间隔到达后，首次访问该页面的用户将触发后台再生，同时页面仍然提供缓存内容，避免等待。
• 再生完成后，新的静态页面被替换，所有后续访问者都将看到更新后的页面。

在 Next.js 中实现 ISR

第一步：创建动态页面

创建一个动态页面，比如博客文章页面：

// pages/posts/[slug].js
import { useRouter } from "next/router";
import { getPost, getAllPostSlugs } from "../../lib/api";

export default function Post({ post }) {
  const router = useRouter();

  if (router.isFallback) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

// 获取所有文章的路径
export async function getStaticPaths() {
  const slugs = await getAllPostSlugs();

  return {
    paths: slugs.map((slug) => ({
      params: { slug },
    })),
    fallback: true, // 开启 ISR
  };
}

// 生成静态页面并设置 revalidate
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);

  return {
    props: { post },
    revalidate: 60, // 每 60 秒再生页面
  };
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

第二步：创建 API 方法

编写 API 方法来获取数据，例如模拟博客文章的获取：

// lib/api.js

// 获取所有文章 slug
export async function getAllPostSlugs() {
  return [{ slug: "first-post" }, { slug: "second-post" }].map(
    (post) => post.slug
  );
}

// 获取单篇文章数据
export async function getPost(slug) {
  const posts = {
    "first-post": {
      title: "第一篇文章",
      content: "这是第一篇文章的内容。",
    },
    "second-post": {
      title: "第二篇文章",
      content: "这是第二篇文章的内容。",
    },
  };
  return posts[slug] || null;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

第三步：运行 Next.js 应用

使用以下命令运行你的 Next.js 项目：

npm run dev
1.

访问博客页面，ISR 机制会在 revalidate 指定的时间间隔后自动更新页面内容。

关键字解释

• getStaticPaths：确定哪些路径应预先渲染。 fallback: true 设置允许 Next.js 按需生成页面。
• getStaticProps：在构建时获取每个帖子的数据，并包含一个 revalidate 属性，该属性指定了重新生成页面前的等待时间（以秒为单位）。
• revalidate：控制 ISR，确保页面以指定的时间间隔在后台重新生成，从而在不完全重建的情况下保持内容最新。

ISR 的优势

ISR 的应用场景

ISR 适用于多种 Web 应用场景，包括：

• 电商网站：商品详情页、分类页面等可定期更新数据，同时保持静态页面的快速响应。
• 新闻网站：新闻文章页面在保证 SEO 的同时，能够实时更新内容。
• 博客：博客文章既可以静态化提高访问速度，又可以定期更新内容。
• 文档网站：API 文档、教程等内容可按需更新，保持时效性。
• 营销网站：着陆页、案例页面等可快速加载，同时保持营销内容的更新。
• 招聘网站：职位列表、公司详情页等可以增量更新，而不影响整体性能。

总结

增量静态再生（ISR）是 Next.js 提供的一项强大功能，它结合了静态站点生成的高性能与服务器端渲染的动态更新能力。借助 ISR，开发者可以构建高效、SEO 友好且始终保持最新内容的网站，而无需每次都进行完整构建。

如果你正在开发一个需要频繁更新但又想保持静态站点性能的应用，ISR 是一个理想的解决方案。希望本指南能帮助你掌握 ISR 的原理及应用，让你的 Next.js 项目更加高效、灵活！