NextJS 13中如何用Axios替代Fetch实现标记页面重验证？

Next.js 13给原生fetch扩展的next.tags是框架专属的缓存配置，Axios本身不支持直接传入这个参数，但可以通过以下两种方式实现类似的重验证效果：

方法1：手动结合revalidateTag API #

当你用Axios获取数据后，在需要触发重验证的场景（比如后台数据更新后），直接调用Next.js的revalidateTag方法标记对应缓存失效：

1. 正常使用Axios请求数据：

import axios from 'axios';

async function fetchData() {
  const res = await axios.get('https://...');
  return res.data;
}

2. 在需要触发重验证的位置（比如API路由、服务器动作）调用：

import { revalidateTag } from 'next/cache';

export async function revalidateCollection() {
  await revalidateTag('collection');
}

这种方式适合需要手动触发重验证的场景，虽没法像fetch那样自动关联标记，但能达到同样的缓存失效效果。

方法2：在服务端组件中用Next.js缓存API封装Axios #

如果想在请求时就关联标记，可以借助Next.js的unstable_cache实验性API（注意后续版本可能变动），把Axios请求包裹起来并指定缓存标记：

import axios from 'axios';
import { unstable_cache } from 'next/cache';

const fetchWithTag = unstable_cache(
  async () => {
    const res = await axios.get('https://...');
    return res.data;
  },
  ['collection-data'], // 缓存键
  { tags: ['collection'] } // 重验证标记
);

// 在服务端组件中使用
async function CollectionPage() {
  const data = await fetchWithTag();
  return <div>{JSON.stringify(data)}</div>;
}

配置后，当调用revalidateTag('collection')时，这个Axios请求的缓存会自动失效并重新获取数据。

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