Next.js ISR如何在自动重验证间隔到期前手动/动态更新指定页面

针对你设置了7天自动重验证间隔、需要提前更新特定页面的需求，Next.js 官方提供了无需全量重建的实现方式，具体操作如下：

1. 推荐方案：使用按需重验证（On-Demand Revalidation） #

该功能是 Next.js 12.1 及以上版本原生支持的能力，是目前最稳定的解法：

• 首先在项目中新增一个专属的 API 路由，用于触发重验证操作，需要做密钥校验避免被恶意调用
• 在 API 逻辑中调用官方提供的重验证方法，传入你要更新的页面路径即可仅重建对应页面

Pages Router 代码示例 #

创建pages/api/revalidate.js文件：

export default async function handler(req, res) {
  // 校验请求密钥，密钥可存在环境变量中
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: '非法请求' })
  }

  try {
    // 传入需要更新的页面路径，比如 /article/101
    await res.revalidate(req.query.path)
    return res.json({ revalidated: true })
  } catch (err) {
    return res.status(500).send('重验证失败')
  }
}

App Router 代码示例 #

创建app/api/revalidate/route.js文件：

import { revalidatePath } from 'next/cache'
import { NextResponse } from 'next/server'

export async function GET(request) {
  const { searchParams } = new URL(request.url)
  const secret = searchParams.get('secret')
  const targetPath = searchParams.get('path')

  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ message: '非法请求' }, { status: 401 })
  }

  revalidatePath(targetPath)
  return NextResponse.json({ revalidated: true, timestamp: Date.now() })
}

触发更新操作 #

部署后，你只需要发起请求访问：https://你的站点域名/api/revalidate?secret=你设置的校验密钥&path=需要更新的页面路径，对应的页面就会立刻拉取最新数据重新生成静态页面，替换旧缓存，全程不会影响其他页面，也不需要全量构建。

2. 低版本兼容方案（Next.js < 12.1） #

如果你使用的版本不支持按需重验证，可以用自定义判断逻辑实现：

• 在页面的getStaticProps中新增内容更新校验逻辑，比如对比CMS的内容更新时间戳，当检测到内容有更新时，返回revalidate: 1强制立刻重验证
• 该方案的局限是需要有用户访问对应页面才会触发更新，第一个访问的用户会看到旧内容，后续访问会返回新生成的页面

注意事项 #

• 如果是动态路由页面，直接传入具体的实例路径即可仅更新单条内容对应的页面，比如/posts/234，不需要更新动态路由下的所有页面
• 校验密钥务必存储在服务端环境变量中，不要硬编码到前端代码，防止接口被恶意调用导致服务负载异常

内容的提问来源于stack exchange，提问作者Salman Amin