Next.js 13.4缓存与revalidate机制是否存在故障？

问题情况 #

我是Next.js和React新手，搭建了13.4.2版本的项目，设置了多种禁用缓存的配置，期望页面每次请求都在服务端重新渲染，获取新的随机数和实时时间API结果，但实际数据会出现陈旧的情况。只有当页面标签页闲置几分钟后返回，数据才会自动刷新。这个问题在本地环境的dev、build模式，以及在线沙箱中都能复现。

页面代码示例 #

export const revalidate = 0;
export const fetchCache = "force-no-store";
export const dynamic = "force-dynamic";

interface Props {
  params: {
    id: string;
  };
}

async function getData() {
  const res = await fetch(
    `https://www.timeapi.io/api/Time/current/zone?timeZone=America/New_York`,
    { cache: "no-store", next: { revalidate: 0 } }
  );
  return res.json();
}

async function getRnd() {
  return Math.floor(Math.random() * 10);
}

export default async function Page({ params }: Props) {
  const data = await getData();
  let rnd = await getRnd();

  return (
    <main className="flex flex-col items-center justify-between p-24">
      <h1> Page ID: {params.id}</h1>
      <p className="text-6xl">Random: {rnd}</p>
      <p>Time: {data.dateTime}</p>
    </main>
  );
}

用PHP开发者能理解的方式解释 #

先类比你熟悉的PHP运行逻辑：

• 在PHP项目中，用户每次刷新页面，服务端都会从头执行整个脚本，重新获取数据、生成HTML返回给浏览器，所以每次刷新都能拿到最新数据。
• 而Next.js的App Router模式下，页面首次渲染是在服务端完成的（类似PHP），但之后页面会在客户端"激活"（hydration），变成一个React单页应用。此时默认的行为是：客户端不会主动重复向服务端发起请求更新数据，除非你手动刷新页面，或者满足特定触发条件。

你设置的revalidate=0、fetchCache="force-no-store"这些配置，确实已经让服务端每次收到请求时都会重新渲染页面、获取最新数据，但问题出在客户端：当页面处于前台时，浏览器不会自动发起新的请求去拿服务端的最新数据，所以你看到的是客户端缓存的旧数据。

而当标签页被闲置（切换到后台）后再返回，Next.js会触发「背景重新验证」机制，自动向服务端请求最新数据并更新页面，这就是你看到数据刷新的原因。

结论 #

这既不是操作失误，也不是框架Bug，是Next.js App Router客户端缓存策略的正常行为。如果想要页面在前台时也能实时更新数据，你需要额外实现主动重取逻辑，比如使用SWR/React Query这类数据缓存库，或者手动添加定时刷新的代码。

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