Next.js 14构建部署后Fetch无法获取数据库最新数据求助

核心问题现象 #

开发模式下所有Fetch请求可正常获取数据库实时数据；构建部署后，写入数据库的新数据无法在页面显示/更新，甚至无法确认请求是否触发。采用SSR方案保障SEO，当前页面通过/api/news接口获取数据，曾尝试getServerSideProps但返回props为undefined，配置{cache: 'no-cache'}后问题仍未解决。

代码问题排查 #

1. API路径错误：代码中使用绝对路径http://78.46.254.73:3000/api/news发起请求，部署后服务器端执行fetch时，可能因网络限制、跨域或地址不可达导致请求失败，进而无法获取最新数据。
2. 无效的SSR API使用：在Next.js 13+ App Router中，getServerSideProps已被废弃，使用该API会导致props返回undefined，需改用组件内异步数据获取方式。
3. 错误日志缺失：仅通过console.error输出错误，部署后服务器端日志可能无法直接查看，难以排查请求是否触发或失败原因。
4. 缓存配置需强化：虽已配置dynamic: 'force-dynamic'和cache: 'no-store'，但部分部署环境（如CDN、反向代理）可能仍存在缓存，需额外添加请求头保障不缓存。

修复步骤与代码优化 #

1. 替换API路径为相对路径 #

服务器端fetch时，相对路径会自动解析为当前服务器地址，避免网络访问问题：

async function fetchNews() {
  try {
    // 使用相对路径替代绝对路径
    const res = await fetch(`/api/news`, { 
      cache: 'no-store',
      // 添加请求头强制禁用缓存
      headers: {
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0'
      }
    });

    // 检查响应状态，处理非成功请求
    if (!res.ok) {
      throw new Error(`API请求失败，状态码：${res.status}`);
    }

    return await res.json();
  } catch (err) {
    console.error('获取新闻数据失败:', err);
    // 可选：添加错误上报逻辑，便于监控排查
    return [];
  }
}

2. 确认缓存配置有效性 #

保留export const dynamic = 'force-dynamic';，该配置强制页面每次请求都在服务器端重新渲染，配合fetch的cache: 'no-store'和请求头，彻底禁用数据缓存。

3. 移除无效的getServerSideProps #

App Router不支持getServerSideProps，直接使用组件内异步数据获取即可，无需额外配置。

4. 排查部署环境缓存 #

• 若使用CDN（如Cloudflare、Vercel Edge Network），需配置页面和API接口的缓存规则，禁用缓存或设置极短的缓存过期时间。
• 检查服务器反向代理（如Nginx）的缓存配置，确保未对/api/*路径进行缓存。

验证方法 #

1. 直接访问API接口：部署后直接访问https://你的域名/api/news，确认返回最新数据，排除API本身的问题。
2. 查看服务器日志：检查部署环境的服务器日志，确认fetchNews函数是否被触发，是否有错误信息输出。
3. 强制刷新页面：在浏览器中按Ctrl+F5强制刷新页面，查看是否加载最新数据。

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