Next.js页面重验证异常：调用revalidatePath触发revalidateTag错误

我有一个基于Pages路由（非App路由）的Next.js应用，其中包含编辑资源的API端点。编辑资源后，查看或重新编辑该资源时仍显示旧版本。查阅文档后尝试使用revalidatePath清除对应路由缓存，代码如下：

// pages/api/resource.js

const handler = async (request, response) => {
    const id = await saveStuff(request);
    revalidatePath(`/resource/[name]`);
    revalidatePath(`/resource/[name]/edit`);
    response.send(JSON.stringify({ id }));
}

但触发了与revalidateTag相关的错误：

Error: Invariant: static generation store missing in revalidateTag
/resource/[name]
at revalidateTag (/home/me/project/next/node_modules/next/dist/server/web/spec-extension/revalidate-tag.js:15:15)
at revalidatePath (/home/me/project/next/node_modules/next/dist/server/web/spec-extension/revalidate-path.js:13:45)
at handler (webpack-internal:///(api)/./pages/api/resource.js:83:67)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

编辑补充：
查看源码发现revalidatePath会调用revalidateTag（将路径作为标签），错误来自以下代码段：

function revalidateTag(tag) {
  const staticGenerationAsyncStorage = fetch.__nextGetStaticStore == null ? void 0 : fetch.__nextGetStaticStore();
      const store = staticGenerationAsyncStorage == null ? void 0 : staticGenerationAsyncStorage.getStore();
      if (!store || !store.incrementalCache) {
          throw new Error(`Invariant: static generation store missing in revalidateTag ${tag}`);
      }

看起来fetch上不存在staticGenerationAsyncStorage，说明Next尚未修补该函数，但代码是在API路由中调用的，Next应该已经完成fetch修补了？

报错核心原因 #

revalidatePath是Next.js 13+ App Router专属的API，Pages Router环境下不支持直接调用，这就是触发错误的根本原因。Pages Router的缓存机制与App Router完全不同，需要使用对应API来刷新缓存。

方案1：使用res.revalidate()（Pages Router推荐方案） #

在Pages Router的API路由中，直接使用response.revalidate()方法刷新指定页面缓存，注意需要传入实际的页面路径（不是动态路由模板）。示例：

// pages/api/resource.js

const handler = async (request, response) => {
    const { name } = request.body; // 从请求中获取资源的实际name参数
    const id = await saveStuff(request);
    
    // 刷新具体的资源详情页和编辑页
    await response.revalidate(`/resource/${name}`);
    await response.revalidate(`/resource/${name}/edit`);
    
    response.send(JSON.stringify({ id }));
}

如果无法从请求直接获取动态参数，需要先从数据库查询对应资源的参数值后再传入。

方案2：使用revalidateTag（限特定场景） #

如果你的页面在getStaticProps中标记了缓存标签（tags），可以在API中调用revalidateTag（Next.js 12.2+支持），但需从next/server导入：

// pages/api/resource.js
import { revalidateTag } from 'next/server';

const handler = async (request, response) => {
    const { name } = request.body;
    const id = await saveStuff(request);
    
    // 对应页面getStaticProps中标记的tag
    await revalidateTag(`resource-${name}`);
    response.send(JSON.stringify({ id }));
}

页面示例（需提前标记tag）：

// pages/resource/[name].js
export async function getStaticProps(context) {
    const { name } = context.params;
    const data = await fetchResource(name);
    
    return {
        props: { data },
        tags: [`resource-${name}`] // 标记缓存标签
    };
}

方案3：自动定时刷新缓存 #

如果不需要手动触发刷新，可以在页面的getStaticProps中设置revalidate字段，让页面按时间间隔自动刷新：

// pages/resource/[name].js
export async function getStaticProps(context) {
    const { name } = context.params;
    const data = await fetchResource(name);
    
    return {
        props: { data },
        revalidate: 60 // 每60秒自动刷新缓存
    };
}

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