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

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

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

ISR 的核心概念

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

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

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

2. revalidate 屬性

在 getStaticProps 方法中，revalidate 允許開發(fā)者指定一個時間間隔（秒）。每當這個時間間隔過去后，新的請求將觸發(fā)后臺再生。

示例代碼：

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

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

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

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

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

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

5. 提升性能

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

6. 增強 SEO

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

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

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

ISR 的工作原理

ISR 的核心機制如下：

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

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

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

創(chuà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;
}

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

使用以下命令運行你的 Next.js 項目：

npm run dev

訪問博客頁面，ISR 機制會在 revalidate 指定的時間間隔后自動更新頁面內(nèi)容。

關(guān)鍵字解釋

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

ISR 的優(yōu)勢

ISR 的應(yīng)用場景

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

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

總結(jié)

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

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