NextJS 14客户端路由30秒缓存无法覆盖问题求助

核心原因 #

你遇到的30秒缓存是Next.js App Router默认的客户端路由缓存（Router Cache），即使服务端设置了revalidate=0和Cache-Control，客户端导航时仍会复用缓存的页面实例，直到30秒后自动失效。

解决方案 #

1. 页面级强制禁用缓存 #

在编辑页的page.tsx中添加以下配置，从服务端渲染和数据获取层彻底禁用缓存：

// app/edit/[id]/page.tsx
export const revalidate = 0; // 禁用服务端静态缓存，每次请求重新渲染页面
export const fetchCache = 'force-no-store'; // 强制所有fetch请求不缓存数据
export const dynamic = 'force-dynamic'; // 强制页面为动态渲染，跳过静态优化逻辑

2. 客户端导航时绕过缓存 #

放弃默认的Link组件，使用useRouter的push方法并指定cache: 'no-store'参数，确保每次导航都重新拉取最新页面：

import { useRouter } from 'next/navigation';

const ListPage = () => {
  const router = useRouter();

  const goToEdit = (id: string) => {
    router.push(`/edit/${id}`, { cache: 'no-store' });
  };

  return <button onClick={() => goToEdit('123')}>编辑条目</button>;
};

3. 强化Middleware缓存头设置 #

针对编辑路由，在middleware.ts中设置更严格的缓存控制头，覆盖全局设置并确保浏览器、中间层都不会缓存页面：

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const isEditRoute = request.nextUrl.pathname.startsWith('/edit/');
  if (isEditRoute) {
    const response = NextResponse.next();
    // 设置严格的不缓存响应头
    response.headers.set('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
    response.headers.set('Pragma', 'no-cache');
    response.headers.set('Expires', '0');
    return response;
  }
  return NextResponse.next();
}

// 指定仅对编辑路由生效
export const config = {
  matcher: '/edit/:path*',
};

4. 数据更新后主动失效缓存 #

在数据提交成功的API或客户端逻辑中，调用revalidatePath明确失效编辑路由的缓存，确保下次访问直接获取最新数据：

// app/api/save/route.ts
import { revalidatePath } from 'next/cache';
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  // 处理数据保存逻辑
  const data = await request.json();
  await saveData(data);
  
  // 失效对应编辑页的缓存
  revalidatePath(`/edit/${data.id}`);
  // 同时失效列表页缓存，确保列表显示最新数据
  revalidatePath('/list');
  
  return NextResponse.json({ success: true });
}

验证方法 #

修改数据后立即返回列表页，再次点击编辑按钮，检查表单数据是否为最新值；同时查看浏览器开发者工具的「网络」面板，确认编辑页的请求状态为200而非304，且响应头包含Cache-Control: no-store。

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