Next.js 13应用部署Vercel后Read函数无法返回更新数据求助

结合Next.js 13 App Router的渲染机制和Vercel的缓存策略，针对你的问题给出以下具体修复方案：

1. 强制API路由动态渲染 #

如果你的Read操作通过API路由（如app/api/todos/route.js）实现，Vercel默认会缓存静态API路由，即使前端请求带no-store也无法获取最新数据。需要在API路由文件顶部添加动态配置：

export const dynamic = "force-dynamic";

或者在响应头中显式设置缓存控制：

export async function GET() {
  const todos = await fetchTodosFromDB();
  return new Response(JSON.stringify(todos), {
    headers: {
      "Cache-Control": "no-store, max-age=0",
    },
  });
}

2. 禁用页面组件的静态缓存 #

如果页面组件（如app/page.js）是Server Component，Next.js默认会静态生成页面内容。需在页面文件顶部添加配置强制动态渲染：

export const dynamic = "force-dynamic";

或者使用revalidate=0禁用缓存：

export const revalidate = 0;

这样页面每次请求都会重新拉取最新数据，而非使用预渲染的静态内容。

3. 确认fetch的no-store配置生效 #

检查发起Read请求的代码，确保缓存选项正确传递：

const res = await fetch("/api/todos", { cache: "no-store" });

如果是在Server Component中直接调用数据库查询（而非通过fetch），同样需要在组件文件添加export const dynamic = "force-dynamic"，避免查询逻辑被静态优化缓存。

4. 检查Vercel项目缓存设置 #

登录Vercel控制台，进入项目的Settings > Functions > Edge and Node.js Functions，确认未开启额外的缓存策略，确保API路由未被标记为静态资源。

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