Next.js 13.4.4 Route Handlers数据不更新问题求助

问题原因 #

在Next.js 13+的App Router中，页面组件默认采用静态渲染，fetch请求会自动被缓存。这意味着页面会在首次加载时获取API数据并缓存，后续即使API响应更新，页面仍会读取缓存内容，导致显示旧数据。而直接访问API或用工具测试时，请求不会经过页面的缓存逻辑，所以能看到最新响应。

解决方法 #

1. 给fetch请求添加缓存控制

修改getTodos函数里的fetch调用，通过配置选项禁用缓存，强制每次请求都获取最新数据：

async function getTodos() {
  const res = await fetch('http://localhost:3000/api', {
    // 二选一即可
    cache: 'no-store', // 完全禁用缓存
    // next: { revalidate: 0 } // 等同于no-store，强制动态获取
  });

  if (!res.ok) {
    throw new Error("Couldn't fetch data");
  };

  return res.json();
}

2. 配置页面为动态渲染

在app/page.js顶部添加dynamic配置，让整个页面变为动态渲染，每次请求都会重新执行组件内的数据获取逻辑：

// app/page.js 顶部添加
export const dynamic = 'force-dynamic';

async function getTodos() {
  // 原有代码不变
}

export default async function Home() {
  // 原有代码不变
}

3. 开发环境临时解决

如果只是开发测试时遇到，可尝试：

• 强制刷新页面（按Ctrl+F5/Cmd+Shift+R）
• 重启开发服务器（停止npm run dev后重新启动）

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