Next.js App Router：无需fetch为缓存React函数标记手动重验证

核心结论 #

可以通过Next.js提供的unstable_cache工具给React缓存函数标记自定义tag，结合revalidateTag实现手动重验证，完全不需要创建公开API。

具体实现步骤 #

1. 用unstable_cache包裹第三方CMS调用函数 #

将你的第三方CMS数据获取逻辑用unstable_cache包裹，并指定自定义tag，让缓存操作和tag关联：

import { unstable_cache } from 'next/cache';
// 导入你的第三方CMS数据获取函数
import { fetchCMSContent } from '@/services/cms';

// 包裹后的缓存函数，关联tag
const getCachedCMSContent = unstable_cache(
  async (contentId) => {
    // 调用第三方CMS库获取数据
    return await fetchCMSContent(contentId);
  },
  ['cms-content-cache-key'], // 可选：自定义缓存键的一部分，用于区分不同缓存实例
  { tags: ['cms-content'] } // 这里设置用于重验证的tag
);

2. 用Server Action触发重验证 #

创建一个Server Action（而非公开API路由）来调用revalidateTag，Server Action是内部执行的，不会暴露成公开接口：

'use server';

import { revalidateTag } from 'next/cache';

export async function triggerCMSRevalidation() {
  // 根据tag触发重验证
  await revalidateTag('cms-content');
  return { status: 'success' };
}

3. 在内部页面调用Server Action触发重验证 #

比如在你的后台管理面板或内部操作页面中，通过按钮等交互调用这个Server Action：

'use client';

import { triggerCMSRevalidation } from '@/actions/revalidate';

export default function RevalidateControl() {
  const handleRevalidate = async () => {
    await triggerCMSRevalidation();
    alert('CMS内容已重验证');
  };

  return (
    <button onClick={handleRevalidate}>
      刷新CMS缓存
    </button>
  );
}

其他标记数据访问的方式 #

除了上述方案，目前Next.js App Router中，只有通过unstable_cache给自定义数据获取函数标记tag，或者在fetch中使用next.tags选项这两种方式，能让缓存操作关联到可手动重验证的tag。React原生的cache()函数本身不支持tag标记，所以无法直接用它实现基于tag的重验证。

需要注意的是，unstable_cache虽然带有unstable前缀，但Next.js官方文档说明该API正在逐步稳定，实际项目中已经被广泛使用，无需过度担心兼容性问题。

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