当前位置：首页 > news >正文

增量静态再生（ISR）详解：Next.js 中的实现与应用

news 2026/5/6 14:37:05

ISR（Incremental Static Regeneration，增量静态再生）是现代前端框架（如 Next.js 和 Nuxt ）提供的一种混合渲染策略，它巧妙地融合了SSG（静态站点生成）的高性能优势和SSR（服务端渲染）的动态更新能力，成为处理 “内容频繁更新但又需要静态性能” 场景的理想选择。

一、核心概念与工作原理

1. 定义

ISR 允许在构建时预渲染部分页面，并在运行时按需更新这些页面的内容，而无需重新生成整个网站。它本质上是 SSG 的增强版，解决了 SSG 内容无法实时更新的核心痛点。

2. 完整工作流程

1. 构建阶段：预渲染部分页面为静态HTML并缓存 2. 用户请求： - 未过期：直接返回缓存的静态HTML（速度快，CDN友好） - 已过期：返回旧缓存HTML → 后台异步触发页面再生 → 新请求获取更新后的HTML 3. 再生机制：仅更新访问到的页面，而非全量重建

关键特性：

静态性：响应快，支持 CDN 缓存，降低服务器压力
增量性：只更新需要变化的页面，避免完整构建的耗时
再生性：后台异步生成，不阻塞当前用户请求

二、ISR 与 SSG/SSR 的核心区别

对比项	SSG	ISR	SSR
HTML 生成时机	仅构建时	构建时+运行时	每次请求时
内容更新方式	需完整重建	增量更新，后台再生	实时生成
首屏速度	最快	快（缓存命中）	较慢
数据实时性	最低	中等（有过期时间）	最高
服务器压力	最低	中等	最高
适用场景	内容固定（博客、文档）	周期性更新内容（商品页、新闻）	实时数据（个性化页面）

三、Next.js 中的 ISR 实现

1. 页面路由（Pages Router）

通过getStaticProps和getStaticPaths配置：

// pages/posts/[slug].tsxexportasyncfunctiongetStaticProps({params}){constpost=awaitfetchPost(params.slug);return{props:{post},revalidate:60,// 60秒后允许再生（关键配置）};}exportasyncfunctiongetStaticPaths(){constslugs=awaitgetPopularSlugs();return{paths:slugs.map(slug=>({params:{slug}})),// 构建时预渲染这些路径fallback:'blocking',// 未预渲染路径：先服务端渲染，再缓存（推荐）};}

2. App 路由（App Router）

通过fetch函数的next.revalidate选项配置：

// app/posts/[id]/page.tsxexportdefaultasyncfunctionPostPage({params}){constpost=awaitfetch(`https://api.example.com/posts/${params.id}`,{next:{revalidate:60}// 60秒后重新验证}).then(res=>res.json());return<div>{post.title}</div>;}

3. 按需 ISR（On-Demand ISR）

手动触发页面再生，适用于内容即时更新场景：

// 重新验证单个页面awaitres.revalidate('/posts/[slug]');// 重新验证多个页面awaitres.revalidate(['/posts/1','/posts/2']);

四、Nuxt 中的 ISR 实现

Nuxt 通过routeRules配置实现 ISR，语法简洁直观：

1. 基础配置

// nuxt.config.tsexportdefaultdefineNuxtConfig({routeRules:{// 博客文章：1小时后重新验证'/blog/**':{isr:3600},// 商品详情页：60秒后重新验证'/products/**':{isr:60},// 首页：构建时预渲染（纯SSG）'/':{prerender:true},}});

2. 组件级 ISR

通过useAsyncData或useFetch设置缓存策略：

<script setup> const { data } = await useAsyncData('product', () => $fetch(`https://api.example.com/products/${route.params.id}`), { // 缓存10分钟 maxAge: 600, // 缓存过期后，后台重新验证 swr: true } ); </script>

3. 手动触发再生

// 服务器端触发awaituseNitroApp().nitro.prerender('/blog/post-1');// 客户端触发（需API支持）await$fetch('/api/revalidate',{method:'POST',body:{path:'/blog/post-1'}});