Next.js App Router缓存问题求助：设no-cache仍无法获取最新数据

1. 给API路由也加上缓存禁用配置 #

如果你的/api/myApiRoute是App Router下的路由，必须在API路由文件里也禁用缓存，不然前端设置再全也没用：

// app/api/myApiRoute/route.js
export const dynamic = "force-dynamic"; // 强制动态渲染，彻底禁用缓存
export const revalidate = 0;

export async function GET() {
  // 你的MongoDB查询逻辑
  const data = await fetchYourMongoData();
  return Response.json(data);
}

要是用的是Pages Router的API，就在响应头里加缓存控制：

// pages/api/myApiRoute.js
export default function handler(req, res) {
  res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  // 查询并返回数据
  res.status(200).json(data);
}

2. Server Components里用unstable_noStore强制跳过缓存 #

如果是在Server Components里拿数据，除了revalidate=0和fetchCache="force-no-store"，还可以加unstable_noStore（Next.js 13.4+支持）直接强制每次请求重新拉数据：

import { unstable_noStore as noStore } from 'next/cache';

export default async function Page() {
  noStore(); // 这句一加，页面绝对不会用缓存数据
  const res = await fetch("/api/myApiRoute", { cache: "no-store" });
  const data = await res.json();
  return <div>{/* 渲染数据 */}</div>;
}

3. 绕开边缘缓存/CDN缓存 #

如果部署在Vercel这类带CDN的平台，可能边缘节点还存着旧数据。可以给请求加个唯一参数强制刷新：

const res = await fetch(`/api/myApiRoute?timestamp=${Date.now()}`, { cache: "no-store" });

或者在API路由的响应头里明确告诉CDN别缓存：

res.setHeader('CDN-Cache-Control', 'no-store');

4. 检查MongoDB查询有没有自带缓存 #

比如用Mongoose的话，默认可能有查询缓存，得手动关掉：

// Mongoose查询时禁用缓存
const data = await Model.find().lean().cache(false);

用原生MongoDB驱动的话，确保每次查询都是发起新请求，没复用缓存结果。

5. 强制页面用动态渲染模式 #

在页面文件里加export const dynamic = "force-dynamic";，确保页面不是静态生成的，彻底避免构建时的缓存：

export const dynamic = "force-dynamic";
export const revalidate = 0;
export const fetchCache = "force-no-store";

export default async function Page() {
  // 数据获取逻辑
}

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