Next.js 中的增量靜態(tài)再生（ISR）：全面指南
增量靜態(tài)再生（Incremental Static Regeneration，簡(jiǎn)稱(chēng) ISR） 是 Next.js 提供的一項(xiàng)創(chuàng)新功能，它允許開(kāi)發(fā)者在不進(jìn)行完整構(gòu)建的情況下，動(dòng)態(tài)更新靜態(tài)頁(yè)面。這項(xiàng)技術(shù)結(jié)合了靜態(tài)站點(diǎn)生成（SSG） 的高效性與服務(wù)器端渲染（SSR） 的動(dòng)態(tài)特性，使其成為現(xiàn)代 Web 開(kāi)發(fā)中的強(qiáng)大解決方案。
什么是增量靜態(tài)再生（ISR）？
在 Next.js 中，ISR 允許靜態(tài)頁(yè)面在初始構(gòu)建完成后進(jìn)行更新，而無(wú)需重新生成整個(gè)網(wǎng)站。它通過(guò)后臺(tái)再生頁(yè)面內(nèi)容，確保頁(yè)面內(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)頁(yè)面在初始構(gòu)建后按需更新，只再生有變更的頁(yè)面，而不影響其他頁(yè)面的靜態(tài)內(nèi)容。
2. revalidate 屬性
在 getStaticProps 方法中，revalidate 允許開(kāi)發(fā)者指定一個(gè)時(shí)間間隔（秒）。每當(dāng)這個(gè)時(shí)間間隔過(guò)去后，新的請(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)證并更新頁(yè)面
};
}3. 按需更新內(nèi)容
頁(yè)面的再生基于用戶請(qǐng)求觸發(fā)，當(dāng) revalidate 時(shí)間間隔到達(dá)時(shí)，首次請(qǐng)求將觸發(fā)頁(yè)面的后臺(tái)更新，更新后的內(nèi)容將在后續(xù)請(qǐng)求中生效。
4. 結(jié)合靜態(tài)與動(dòng)態(tài)內(nèi)容
ISR 允許預(yù)生成靜態(tài)頁(yè)面，并在其上動(dòng)態(tài)更新，使網(wǎng)站可以在保證快速加載的同時(shí)，保持內(nèi)容的時(shí)效性。
5. 提升性能
通過(guò) ISR，頁(yè)面默認(rèn)以靜態(tài)方式加載，帶來(lái)更快的訪問(wèn)速度，而后臺(tái)的增量更新避免了完整構(gòu)建帶來(lái)的性能損耗。
6. 增強(qiáng) SEO
ISR 允許搜索引擎獲取完整的 HTML 頁(yè)面，并且頁(yè)面內(nèi)容始終是最新的，有助于提升 SEO 表現(xiàn)。
7. 減少構(gòu)建時(shí)間
由于 ISR 僅更新需要更新的頁(yè)面，網(wǎng)站不必每次都進(jìn)行完整構(gòu)建，這對(duì)于大規(guī)模站點(diǎn)尤為重要。
ISR 的工作原理
ISR 的核心機(jī)制如下：
- 頁(yè)面在初次構(gòu)建時(shí)被靜態(tài)生成，并存儲(chǔ)為靜態(tài) HTML。
- 在 revalidate 設(shè)定的時(shí)間間隔內(nèi)，所有訪問(wèn)者都會(huì)看到緩存的靜態(tài)頁(yè)面。
- 時(shí)間間隔到達(dá)后，首次訪問(wèn)該頁(yè)面的用戶將觸發(fā)后臺(tái)再生，同時(shí)頁(yè)面仍然提供緩存內(nèi)容，避免等待。
- 再生完成后，新的靜態(tài)頁(yè)面被替換，所有后續(xù)訪問(wèn)者都將看到更新后的頁(yè)面。
在 Next.js 中實(shí)現(xiàn) ISR
第一步：創(chuàng)建動(dòng)態(tài)頁(yè)面
創(chuàng)建一個(gè)動(dòng)態(tài)頁(yè)面，比如博客文章頁(yè)面：
// 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, // 開(kāi)啟 ISR
};
}
// 生成靜態(tài)頁(yè)面并設(shè)置 revalidate
export async function getStaticProps({ params }) {
const post = await getPost(params.slug);
return {
props: { post },
revalidate: 60, // 每 60 秒再生頁(yè)面
};
}第二步：創(chuàng)建 API 方法
編寫(xiě) API 方法來(lái)獲取數(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訪問(wèn)博客頁(yè)面，ISR 機(jī)制會(huì)在 revalidate 指定的時(shí)間間隔后自動(dòng)更新頁(yè)面內(nèi)容。
關(guān)鍵字解釋
- getStaticPaths：確定哪些路徑應(yīng)預(yù)先渲染。 fallback: true 設(shè)置允許 Next.js 按需生成頁(yè)面。
- getStaticProps：在構(gòu)建時(shí)獲取每個(gè)帖子的數(shù)據(jù)，并包含一個(gè) revalidate 屬性，該屬性指定了重新生成頁(yè)面前的等待時(shí)間（以秒為單位）。
- revalidate：控制 ISR，確保頁(yè)面以指定的時(shí)間間隔在后臺(tái)重新生成，從而在不完全重建的情況下保持內(nèi)容最新。
ISR 的優(yōu)勢(shì)
優(yōu)勢(shì) | 說(shuō)明 |
優(yōu)化性能 | 提供靜態(tài)頁(yè)面的加載速度，同時(shí)支持后臺(tái)內(nèi)容更新 |
提升 SEO | 讓搜索引擎獲取完整 HTML，并保持頁(yè)面內(nèi)容最新 |
提高可擴(kuò)展性 | 僅更新需要變更的頁(yè)面，而不是整個(gè)站點(diǎn) |
保持內(nèi)容新鮮 | 頁(yè)面在用戶請(qǐng)求后定期更新，無(wú)需手動(dòng)構(gòu)建 |
減少服務(wù)器負(fù)載 | 通過(guò)靜態(tài)化減少服務(wù)器壓力，適用于高流量場(chǎng)景 |
改善用戶體驗(yàn) | 訪問(wèn)速度快，且內(nèi)容更新及時(shí) |
降低運(yùn)維成本 | 避免頻繁構(gòu)建，減少服務(wù)器資源占用 |
ISR 的應(yīng)用場(chǎng)景
ISR 適用于多種 Web 應(yīng)用場(chǎng)景，包括：
- 電商網(wǎng)站：商品詳情頁(yè)、分類(lèi)頁(yè)面等可定期更新數(shù)據(jù)，同時(shí)保持靜態(tài)頁(yè)面的快速響應(yīng)。
- 新聞網(wǎng)站：新聞文章頁(yè)面在保證 SEO 的同時(shí)，能夠?qū)崟r(shí)更新內(nèi)容。
- 博客：博客文章既可以靜態(tài)化提高訪問(wèn)速度，又可以定期更新內(nèi)容。
- 文檔網(wǎng)站：API 文檔、教程等內(nèi)容可按需更新，保持時(shí)效性。
- 營(yíng)銷(xiāo)網(wǎng)站：著陸頁(yè)、案例頁(yè)面等可快速加載，同時(shí)保持營(yíng)銷(xiāo)內(nèi)容的更新。
- 招聘網(wǎng)站：職位列表、公司詳情頁(yè)等可以增量更新，而不影響整體性能。
總結(jié)
增量靜態(tài)再生（ISR）是 Next.js 提供的一項(xiàng)強(qiáng)大功能，它結(jié)合了靜態(tài)站點(diǎn)生成的高性能與服務(wù)器端渲染的動(dòng)態(tài)更新能力。借助 ISR，開(kāi)發(fā)者可以構(gòu)建高效、SEO 友好且始終保持最新內(nèi)容的網(wǎng)站，而無(wú)需每次都進(jìn)行完整構(gòu)建。
如果你正在開(kāi)發(fā)一個(gè)需要頻繁更新但又想保持靜態(tài)站點(diǎn)性能的應(yīng)用，ISR 是一個(gè)理想的解決方案。希望本指南能幫助你掌握 ISR 的原理及應(yīng)用，讓你的 Next.js 項(xiàng)目更加高效、靈活！
