增量靜態(tài)再生（Incremental Static Regeneration，簡稱 ISR） 是 Next.js 提供的一項(xiàng)創(chuàng)新功能，它允許開發(fā)者在不進(jìn)行完整構(gòu)建的情況下，動(dòng)態(tài)更新靜態(tài)頁面。這項(xiàng)技術(shù)結(jié)合了靜態(tài)站點(diǎn)生成（SSG） 的高效性與服務(wù)器端渲染（SSR） 的動(dòng)態(tài)特性，使其成為現(xiàn)代 Web 開發(fā)中的強(qiáng)大解決方案。

什么是增量靜態(tài)再生（ISR）？

在 Next.js 中，ISR 允許靜態(tài)頁面在初始構(gòu)建完成后進(jìn)行更新，而無需重新生成整個(gè)網(wǎng)站。它通過后臺(tái)再生頁面內(nèi)容，確保頁面內(nèi)容保持最新，同時(shí)保留靜態(tài)生成的性能優(yōu)勢(shì)。這種方式兼顧了靜態(tài)站點(diǎn)生成（SSG）和服務(wù)器端渲染（SSR）的優(yōu)點(diǎn)，提供了更靈活的內(nèi)容更新方案。

ISR 的核心概念

ISR 結(jié)合了靜態(tài)站點(diǎn)生成（SSG） 和 服務(wù)器端渲染（SSR） 的特性，以下是它的核心概念：

1. 增量靜態(tài)再生

ISR 允許靜態(tài)頁面在初始構(gòu)建后按需更新，只再生有變更的頁面，而不影響其他頁面的靜態(tài)內(nèi)容。

2. revalidate 屬性

在 getStaticProps 方法中，revalidate 允許開發(fā)者指定一個(gè)時(shí)間間隔（秒）。每當(dāng)這個(gè)時(shí)間間隔過去后，新的請(qǐng)求將觸發(fā)后臺(tái)再生。

示例代碼：

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

  return {
    props: { data },
    revalidate: 10, // 每 10 秒重新驗(yàn)證并更新頁面
  };
}

3. 按需更新內(nèi)容

頁面的再生基于用戶請(qǐng)求觸發(fā)，當(dāng) revalidate 時(shí)間間隔到達(dá)時(shí)，首次請(qǐng)求將觸發(fā)頁面的后臺(tái)更新，更新后的內(nèi)容將在后續(xù)請(qǐng)求中生效。

4. 結(jié)合靜態(tài)與動(dòng)態(tài)內(nèi)容

ISR 允許預(yù)生成靜態(tài)頁面，并在其上動(dòng)態(tài)更新，使網(wǎng)站可以在保證快速加載的同時(shí)，保持內(nèi)容的時(shí)效性。

5. 提升性能

通過 ISR，頁面默認(rèn)以靜態(tài)方式加載，帶來更快的訪問速度，而后臺(tái)的增量更新避免了完整構(gòu)建帶來的性能損耗。

6. 增強(qiáng) SEO

ISR 允許搜索引擎獲取完整的 HTML 頁面，并且頁面內(nèi)容始終是最新的，有助于提升 SEO 表現(xiàn)。

7. 減少構(gòu)建時(shí)間

由于 ISR 僅更新需要更新的頁面，網(wǎng)站不必每次都進(jìn)行完整構(gòu)建，這對(duì)于大規(guī)模站點(diǎn)尤為重要。

ISR 的工作原理

ISR 的核心機(jī)制如下：

• 頁面在初次構(gòu)建時(shí)被靜態(tài)生成，并存儲(chǔ)為靜態(tài) HTML。
• 在 revalidate 設(shè)定的時(shí)間間隔內(nèi)，所有訪問者都會(huì)看到緩存的靜態(tài)頁面。
• 時(shí)間間隔到達(dá)后，首次訪問該頁面的用戶將觸發(fā)后臺(tái)再生，同時(shí)頁面仍然提供緩存內(nèi)容，避免等待。
• 再生完成后，新的靜態(tài)頁面被替換，所有后續(xù)訪問者都將看到更新后的頁面。

在 Next.js 中實(shí)現(xiàn) ISR

第一步：創(chuàng)建動(dòng)態(tài)頁面

創(chuàng)建一個(gè)動(dòng)態(tài)頁面，比如博客文章頁面：

// 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
  };
}

// 生成靜態(tài)頁面并設(shè)置 revalidate
export async function getStaticProps({ params }) {
  const post = await getPost(params.slug);

  return {
    props: { post },
    revalidate: 60, // 每 60 秒再生頁面
  };
}

第二步：創(chuàng)建 API 方法

編寫 API 方法來獲取數(shù)據(jù)，例如模擬博客文章的獲取：

// lib/api.js

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

// 獲取單篇文章數(shù)據(jù)
export async function getPost(slug) {
  const posts = {
    "first-post": {
      title: "第一篇文章",
      content: "這是第一篇文章的內(nèi)容。",
    },
    "second-post": {
      title: "第二篇文章",
      content: "這是第二篇文章的內(nèi)容。",
    },
  };
  return posts[slug] || null;
}

第三步：運(yùn)行 Next.js 應(yīng)用

使用以下命令運(yùn)行你的 Next.js 項(xiàng)目：

npm run dev

訪問博客頁面，ISR 機(jī)制會(huì)在 revalidate 指定的時(shí)間間隔后自動(dòng)更新頁面內(nèi)容。

關(guān)鍵字解釋

• getStaticPaths：確定哪些路徑應(yīng)預(yù)先渲染。 fallback: true 設(shè)置允許 Next.js 按需生成頁面。
• getStaticProps：在構(gòu)建時(shí)獲取每個(gè)帖子的數(shù)據(jù)，并包含一個(gè) revalidate 屬性，該屬性指定了重新生成頁面前的等待時(shí)間（以秒為單位）。
• revalidate：控制 ISR，確保頁面以指定的時(shí)間間隔在后臺(tái)重新生成，從而在不完全重建的情況下保持內(nèi)容最新。

ISR 的優(yōu)勢(shì)

ISR 的應(yīng)用場(chǎng)景

ISR 適用于多種 Web 應(yīng)用場(chǎng)景，包括：

• 電商網(wǎng)站：商品詳情頁、分類頁面等可定期更新數(shù)據(jù)，同時(shí)保持靜態(tài)頁面的快速響應(yīng)。
• 新聞網(wǎng)站：新聞文章頁面在保證 SEO 的同時(shí)，能夠?qū)崟r(shí)更新內(nèi)容。
• 博客：博客文章既可以靜態(tài)化提高訪問速度，又可以定期更新內(nèi)容。
• 文檔網(wǎng)站：API 文檔、教程等內(nèi)容可按需更新，保持時(shí)效性。
• 營銷網(wǎng)站：著陸頁、案例頁面等可快速加載，同時(shí)保持營銷內(nèi)容的更新。
• 招聘網(wǎng)站：職位列表、公司詳情頁等可以增量更新，而不影響整體性能。

總結(jié)

增量靜態(tài)再生（ISR）是 Next.js 提供的一項(xiàng)強(qiáng)大功能，它結(jié)合了靜態(tài)站點(diǎn)生成的高性能與服務(wù)器端渲染的動(dòng)態(tài)更新能力。借助 ISR，開發(fā)者可以構(gòu)建高效、SEO 友好且始終保持最新內(nèi)容的網(wǎng)站，而無需每次都進(jìn)行完整構(gòu)建。

如果你正在開發(fā)一個(gè)需要頻繁更新但又想保持靜態(tài)站點(diǎn)性能的應(yīng)用，ISR 是一個(gè)理想的解決方案。希望本指南能幫助你掌握 ISR 的原理及應(yīng)用，讓你的 Next.js 項(xiàng)目更加高效、靈活！