部署Vercel后Next.js站点MongoDB数据前端不更新问题排查

核心原因：Vercel对Next.js App Router API路由的默认静态缓存 #

你遇到的问题本质是Vercel部署后，App Router的API路由被默认做了静态缓存处理，导致前端请求到的始终是部署时的旧数据快照——即便数据库已经更新，API返回的还是缓存的旧内容。

具体修复步骤 #

1. 修正API路由的缓存策略与响应设置 #

修改/api/project/route.ts，添加禁用缓存的响应头，同时修正错误的状态码与catch逻辑：

export const GET = async (req) => {
  try {
    await connectToDB();
    const projects = await Projects.find({}).populate("_id");
    // GET请求成功返回200状态码（201是创建资源的POST请求规范），同时添加禁用缓存的头
    return new Response(JSON.stringify(projects), { 
      status: 200,
      headers: {
        'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0',
      }
    });
  } catch (error) {
    // 必须return错误响应，否则会返回undefined导致前端报错
    return new Response("Failed to fetch Projects", { status: 500 });
  }
};

2. 可选：强制API路由动态渲染 #

在API路由文件顶部添加dynamic配置，强制Vercel每次请求都重新执行路由逻辑，彻底避免静态缓存：

// 文件最顶部添加
export const dynamic = 'force-dynamic';

export const GET = async (req) => {
  // 原逻辑...
};

3. 前端请求的补充优化 #

虽然你已经设置了cache: "no-cache"，可以改用更严格的配置确保前端不缓存响应：

const res = await fetch("/api/project", {
  cache: "no-store",
  headers: {
    "Cache-Control": "no-store",
  },
});

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