部署在Vercel的Next.js API返回旧数据而非最新数据
问题:Next.js 14 API部署到Vercel后无法获取最新数据库数据
我开发了一个Next.js API用于从数据库获取全部历史记录,API实现代码如下:
export async function GET(req: NextRequest) { await dbConnect(); try { const history = await getHistory(); return new NextResponse(JSON.stringify(history), { status: 200, headers: { "Content-Type": "application/json", "Cache-Control": "no-store" }, }); } catch (error) { console.error(error); return NextResponse.json( { error: "an unexpected error occurred" }, { status: 500 } ); }
该API初次部署到Vercel时运行正常,但当我向数据库添加新的历史记录后,调用API仍返回旧响应,无法获取最新数据。我使用的是Next.js14版本。
已尝试以下操作:
- 添加
"Cache-Control": "no-store"以阻止缓存 - 确认新历史记录已成功添加到数据库
- 本地测试API(可正常返回更新后的数据)
请问Vercel或Next.js中是否存在其他缓存机制?如何确保API每次调用都能获取最新数据?
解决方案
核心原因
Next.js 14的App Router中,API路由默认会进行静态优化(即使设置了Cache-Control),同时Vercel的边缘CDN也可能缓存响应结果,这两个机制共同导致了旧数据的返回。
具体解决步骤
- 强制API路由动态渲染
在API文件顶部添加export const dynamic = "force-dynamic";,这个配置会让Next.js在每次请求时都执行服务器端代码,完全跳过静态缓存:
export const dynamic = "force-dynamic"; // 关键配置:强制动态处理每个请求 export async function GET(req: NextRequest) { await dbConnect(); try { const history = await getHistory(); return new NextResponse(JSON.stringify(history), { status: 200, headers: { "Content-Type": "application/json", "Cache-Control": "no-store", "Vercel-CDN-Cache-Control": "no-store" // 针对Vercel CDN的额外缓存控制 }, }); } catch (error) { console.error(error); return NextResponse.json( { error: "an unexpected error occurred" }, { status: 500 } ); } }
针对Vercel CDN的缓存控制
添加"Vercel-CDN-Cache-Control": "no-store"响应头,明确告知Vercel的边缘网络不要缓存该API的响应,避免CDN层返回旧数据。替代方案:使用
revalidate配置
如果force-dynamic不生效,也可以尝试添加export const revalidate = 0;,效果类似,强制每次请求都重新生成响应:
export const revalidate = 0; // 等同于禁用缓存,每次请求都重新获取数据
验证方法
部署修改后的代码到Vercel后,添加新的历史记录,再次调用API,确认返回最新数据。如果仍有问题,可以在Vercel控制台的「函数」页面查看该API的缓存状态,确认动态渲染配置已生效。
内容的提问来源于stack exchange,提问作者Aswin
相关产品推荐
相关产品推荐

