Next.js中unstable_cache缓存不生效问题求助

以下是导致缓存未生效的常见原因及对应解决方案：

1. 开发模式默认跳过缓存 #

unstable_cache 仅在生产模式（执行next build && next start）下生效，开发模式（next dev）为了方便调试，会强制跳过缓存逻辑，每次都会执行原始函数。你看到的"cache miss"日志是开发环境的正常行为，建议构建生产包测试缓存是否真正生效。

2. 缓存函数定义位置错误 #

你将getCachedUser定义在组件内部，组件每次渲染都会重新创建这个被unstable_cache包装的函数，导致缓存上下文丢失，无法复用缓存结果。必须把缓存函数定义在组件外部，确保只初始化一次：

// 缓存函数定义在组件外部，保证全局唯一
const getCachedUser = unstable_cache(
  async (userId) => {
    console.log("cache miss");
    return { id: userId };
  },
  ["user-profile"], // 缓存键前缀
  {
    tags: ["users"],
    revalidate: 60,
  }
);

export default async function MyProfileInfo() {
  const { authUser } = await getAuthUser({
    redirectionOnError: pages.login,
  });

  let employer;
  try {
    console.log("get employer from component");
    employer = await getCachedUser(authUser.id);
    console.log(employer);
  } catch (err) {
    console.log(err);
    return;
  }
}

3. 缓存键未关联动态参数（第一个示例问题） #

第一个示例中，缓存键使用固定的["my-app-user"]，未将用户ID这类动态参数纳入缓存标识逻辑，会导致不同用户的请求共享同一缓存条目。虽然unstable_cache会自动将函数参数追加到缓存键中，但显式确保动态参数参与缓存键生成更稳妥：

const getCachedUser = unstable_cache(
  async (id) => getEmployerByAuthID(id),
  ["my-app-user"], // 静态前缀，函数参数id会自动加入缓存键
);

4. 确认组件为Server Component #

unstable_cache 是为Server Components设计的，如果你的组件添加了'use client'指令成为Client Component，缓存逻辑将无法生效。确保组件未添加该指令，保持默认的Server Component类型。

关于unstable_cache的可用性 #

unstable_cache 在Next.js 13、14版本中均可正常使用（虽标记为unstable，但核心缓存功能稳定），无需升级到Next.js 15，满足上述条件即可正常工作。

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