Vercel部署页面无法获取MongoDB最新数据求助

问题背景 #

本地运行时，fetchPrompts函数可正常获取MongoDB最新数据，但部署到Vercel后，目标页面仅显示部署初期的数据，新增数据无法加载。已确认MongoDB中存在新增数据，且仅该页面出现此问题，其他页面在本地和部署环境均能正常获取全部数据。将fetch请求添加cache: 'no-cache'参数后可正常获取新数据，同时发现/api/prompt/route.js被处理成静态文件。

原因分析 #

Vercel部署Next.js应用时，默认会对无动态参数、无特殊配置的API路由进行静态优化，导致API响应被边缘缓存，不会实时从数据库拉取最新数据。而本地开发环境默认禁用此类缓存，因此表现正常。

解决方案 #

1. 前端fetch请求强制禁用缓存 #

修改前端的fetch调用，显式添加缓存控制参数，强制每次请求从服务器获取最新数据：

const fetchPrompts = async () => {
  try {
    const response = await fetch('/api/prompt', {
      method: 'GET',
      cache: 'no-cache', // 禁用缓存，强制实时请求
    });
    if (!response.ok) {
      throw new Error('Failed to fetch prompts');
    }
    const data = await response.json();
    setPrompts(data);
    console.log('Prompts:', data);
  } catch (error) {
    setError(error.message);
    console.error('Failed to fetch prompts:', error);
  } finally {
    setLoading(false);
  }
};

2. 后端API路由强制设置为动态 #

在API路由文件顶部添加dynamic配置，强制Next.js将该路由视为动态路由，禁止静态缓存优化：

import { connectToDatabase } from '@utils/database';
import Prompt from '@models/prompt';

// 强制该API路由为动态模式，禁用静态缓存
export const dynamic = 'force-dynamic';

export const GET = async () => {
  try {
    await connectToDatabase();

    const prompts = await Prompt.find({}).populate('creator');
    return new Response(JSON.stringify(prompts), {
      status: 200,
      headers: { 'Cache-Control': 'no-store, max-age=0' },
    });
  } catch (error) {
    return new Response('Failed to fetch all prompts', { status: 500 });
  }
};

3. 检查Next.js全局配置 #

确保next.config.js中没有对/api/prompt路由设置静态生成规则，避免覆盖上述动态配置。

说明 #

硬编码的fetch请求能正常工作，核心原因是添加了cache: 'no-cache'参数，强制浏览器和Vercel边缘节点跳过缓存，直接请求最新数据。而默认的fetch('/api/prompt')调用在Vercel环境下会触发静态缓存策略，导致旧数据被重复返回。

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