Next.js 14 App目录下使用router.push()时如何强制页面重渲染？

1. 在router.push()中添加refresh选项 #

在Client Component里调用router.push()时，传入{ refresh: true }参数，强制触发页面刷新，重新拉取Server Component的最新数据：

'use client';
import { useRouter } from 'next/navigation';

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

  const handleNavigate = () => {
    router.push('/target-page', { refresh: true });
  };

  return <button onClick={handleNavigate}>跳转到目标页面</button>;
};

export default SomeComponent;

2. 确保目标页面的fetch请求禁用缓存 #

如果目标Server Component包含数据请求，即便页面设置了dynamic: "force-dynamic"，fetch默认仍会缓存数据。需给fetch请求添加cache: 'no-store'或next: { revalidate: 0 }：

// app/target-page/page.tsx
export const dynamic = "force-dynamic";

async function fetchData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'no-store', // 禁用缓存
  });
  return res.json();
}

export default async function TargetPage() {
  const data = await fetchData();
  return <div>{JSON.stringify(data)}</div>;
}

3. 使用revalidatePath手动清除目标页面缓存 #

在导航操作前后，调用revalidatePath清除目标页面的缓存，确保下次渲染时获取最新数据：

'use client';
import { useRouter } from 'next/navigation';
import { revalidatePath } from 'next/cache';

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

  const handleNavigate = async () => {
    // 清除目标页面缓存
    revalidatePath('/target-page');
    router.push('/target-page');
  };

  return <button onClick={handleNavigate}>跳转到目标页面</button>;
};

export default SomeComponent;

4. 检查中间件的缓存配置 #

如果项目中有middleware.ts，确认是否设置了全局缓存策略（比如Cache-Control头），这类配置可能会覆盖页面级的动态设置。若存在冲突，需调整中间件规则，不对目标页面应用缓存：

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

export function middleware(request: NextRequest) {
  // 不对目标页面设置缓存头
  if (request.nextUrl.pathname === '/target-page') {
    return NextResponse.next({
      headers: {
        'Cache-Control': 'no-store, max-age=0',
      },
    });
  }
  // 其他页面的缓存规则
  return NextResponse.next();
}

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