Next.js v12中ISR动态触发重新验证的实现方法咨询

完全可以不用固定的revalidate时长，Next.js v12.1及以上版本支持按需增量静态再生（On-Demand ISR），能在后端数据变更时主动触发页面重新验证，具体实现步骤如下：

1. 配置页面的ISR基础设置 #

在你的ISR页面组件中，保留revalidate配置（可以设一个较大的值比如86400，或者在v12.1+中直接设为false），确保页面启用ISR机制：

// pages/posts/[slug].js
export async function getStaticProps({ params }) {
  const data = await fetch(`https://your-api/posts/${params.slug}`);
  const post = await data.json();

  return {
    props: { post },
    // 基础配置，按需触发会覆盖这个自动刷新逻辑
    revalidate: false // 或者设为大值如86400
  };
}

2. 创建重验证API路由 #

在pages/api目录下新建revalidate.js，这个路由用来接收后端的触发请求，调用Next.js内置的res.revalidate()方法生成新的静态页面：

// 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: 'Invalid secret key' });
  }

  try {
    // 获取要重验证的页面路径，比如/posts/my-first-post
    const targetPath = req.query.path;
    await res.revalidate(targetPath);
    return res.json({ revalidated: true, message: '页面已重新生成' });
  } catch (error) {
    // 重验证失败时返回错误信息
    return res.status(500).json({ message: '重验证失败', error: error.message });
  }
}

3. 后端数据变更时触发重验证 #

当你的后端API或CMS更新数据后，发送一个GET请求到刚才创建的API路由，带上验证密钥和目标页面路径：

GET https://你的域名/api/revalidate?secret=你的密钥&path=/posts/更新的文章slug

如果需要批量重验证多个页面，可以修改API路由，接收多个路径参数并循环调用res.revalidate()：

// 批量重验证的API路由示例
export default async function handler(req, res) {
  if (req.query.secret !== process.env.REVALIDATE_SECRET) {
    return res.status(401).json({ message: 'Invalid secret key' });
  }

  try {
    const paths = Array.isArray(req.query.path) ? req.query.path : [req.query.path];
    for (const path of paths) {
      await res.revalidate(path);
    }
    return res.json({ revalidated: true, count: paths.length });
  } catch (error) {
    return res.status(500).json({ message: '部分页面重验证失败', error: error.message });
  }
}

注意事项 #

• 确保你的Next.js版本是v12.1及以上，早期v12版本不支持On-Demand ISR，需要升级。
• 务必设置REVALIDATE_SECRET环境变量，不要硬编码密钥，防止泄露。
• 对于动态路由页面，必须传入具体的完整路径（如/posts/123），不能只传/posts/[slug]。

除了这种官方支持的按需触发方式，其他方案比如客户端用SWR/React Query拉取最新数据，只是在前端刷新内容，不会触发服务器端的静态页面重新生成，所以如果需要更新静态缓存，On-Demand ISR是唯一可靠的方式。

内容的提问来源于stack exchange，提问作者D. K.