Next.js 13项目刷新仅展示缓存页面，请求不更新问题求助

核心问题分析 #

你的代码逻辑本身无重大错误，但结合Next.js 13.4.1的特性，以下细节可能导致动态请求不生效：

• 随机ID范围错误引发无效请求
• 浏览器缓存干扰页面更新
• 版本存在已知动态渲染bug
• 冗余配置未起到预期作用

具体修复步骤 #

1. 修正Todo ID范围
   JSONPlaceholder的todos接口ID范围是1-100，你当前的Math.floor(Math.random() * 100)会生成0-99的数字，当ID为0时请求返回404，可能导致页面显示固定异常内容。修改为：

const todoId = Math.floor(Math.random() * 100) + 1;

2. 简化动态渲染配置
   你同时设置了revalidate:0、dynamic:"force-dynamic"和cache:"no-store"，实际上仅需export const dynamic = "force-dynamic"即可强制页面每次请求都在服务器端重新渲染，无需重复配置。

3. 增强缓存控制
   添加响应头避免浏览器缓存页面内容：

const res = await fetch(
  `https://jsonplaceholder.typicode.com/todos/${todoId}`,
  {
    cache: "no-store",
    headers: {
      'Cache-Control': 'no-cache, no-store, must-revalidate'
    }
  }
);

4. 强制刷新验证
   普通刷新可能触发浏览器缓存，使用Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，确认是否能获取新内容。

5. 升级Next.js版本
   Next.js 13.4.1存在部分动态渲染的已知bug，建议升级到13.4.2及以上版本修复相关问题。

修正后的完整代码 #

async function getTodo() {
  const todoId = Math.floor(Math.random() * 100) + 1;
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId}`,
    {
      cache: "no-store",
      headers: {
        'Cache-Control': 'no-cache, no-store, must-revalidate'
      }
    }
  );

  if (!res.ok) {
    throw new Error('获取Todo失败');
  }

  const data = await res.json();
  return data;
}

export const dynamic = "force-dynamic";

export default async function Todo() {
  const todo = await getTodo();
  return <h2>{todo.title}</h2>;
}

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