Next.js 13 App目录下非fetch方式的ISR数据失效实现

针对你提出的「用Axios等非fetch方式复刻ISR模型」的问题，分两种路由场景给出解决方案：

1. 保留Pages Router的情况 #

如果你的项目还在使用Next.js的Pages Router，原来的getStaticProps写法完全兼容Next.js 13+，不需要做任何修改。你给出的示例代码可以直接运行，revalidate参数依然会触发ISR逻辑：

export async function getStaticProps() {
  const user = await axios.get('/user?ID=12345');

  return {
    props: { user },
    revalidate: 10,
  }
}

2. 迁移到App Router的情况 #

在App Router体系下，没有了getStaticProps，可以通过以下两种方式实现非fetch请求的ISR：

方式一：用unstable_cache封装异步请求 #

Next.js提供的unstable_cache（当前已稳定可用）可以缓存任意异步函数的结果，并设置重新验证时间，完美复刻ISR的「后台更新缓存+返回旧数据」的行为。

示例代码：

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

// 封装带缓存策略的用户数据请求
const getCachedUser = unstable_cache(
  async () => {
    const res = await axios.get('/user?ID=12345');
    return res.data;
  },
  ['user-12345'], // 唯一缓存键，避免不同数据缓存冲突
  { revalidate: 10 } // 重新验证间隔（秒）
);

// 在Server Component中调用
export default async function UserPage() {
  const user = await getCachedUser();
  return <div>用户信息：{JSON.stringify(user)}</div>;
}

方式二：设置路由段全局重新验证 #

如果整个路由页面的所有数据都需要统一的缓存周期，可以在路由的page.js或layout.js中导出revalidate配置，该路由下所有异步数据获取都会遵循这个规则：

// app/user/page.js
import axios from 'axios';

// 全局设置该路由的重新验证时间（秒）
export const revalidate = 10;

export default async function UserPage() {
  const res = await axios.get('/user?ID=12345');
  const user = res.data;
  return <div>用户信息：{JSON.stringify(user)}</div>;
}

补充说明 #

• 上述两种方式仅在Server Component中生效；如果是Client Component，需要结合SWR、React Query等第三方库实现类似的缓存与重新验证逻辑；
• 使用unstable_cache时，务必确保缓存键的唯一性，避免不同数据的缓存互相覆盖。

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