NextJS中如何实现动态页面在客户端导航时重新渲染？Router缓存问题求助

兄弟我太懂你这种抓狂的感觉了！我之前在做Next.js App Router项目的时候，也被这个默认的客户端路由缓存坑过好多次——明明是动态生成的内容，结果客户端跳转回来就一直显示旧的，硬刷新才会变，简直离谱！

先给你捋清楚问题根源：Next.js App Router默认会把Server Component渲染的页面内容缓存起来，当你用<Link>做客户端导航的时候，它会直接从缓存里读内容，不会再去服务器请求新的渲染结果，所以你那个Math.random()只会在第一次加载或者硬刷新的时候生成一次，从/other跳回来自然不会变。

下面给你几个实用的解决方案，你可以根据自己的需求选：

1. 全局禁用页面缓存（最简单直接） #

如果你的整个页面都需要每次导航都重新渲染，直接在页面组件里加个配置就行，两种方式都可以：

方式一：用revalidate=0 #

修改你的app/page.tsx：

import Link from "next/link";

// 标记页面为完全动态，每次请求都重新生成内容
export const revalidate = 0;

export default function HomePage() {
  const value = Math.random();

  return (
    <main>
      <h1>App router</h1>
      <p>{value}</p>
      <Link href="/other">Other</Link>
    </main>
  );
}

方式二：用dynamic="force-dynamic" #

效果和上面差不多，也是强制页面每次都动态渲染：

import Link from "next/link";

export const dynamic = "force-dynamic";

export default function HomePage() {
  const value = Math.random();

  return (
    <main>
      <h1>App router</h1>
      <p>{value}</p>
      <Link href="/other">Other</Link>
    </main>
  );
}

这两种方式的区别不大，revalidate=0更多是从缓存策略的角度禁用缓存，dynamic="force-dynamic"则是明确告诉Next.js这个页面是完全动态的，按需选就行。

2. 局部禁用缓存（适合只需要部分内容刷新的场景） #

如果你的页面大部分内容是静态的，只有一小部分需要动态更新，那没必要整个页面都禁用缓存，可以用noStore函数（Next.js 13.4+支持）来单独控制这个Server Component的缓存：

修改app/page.tsx：

import Link from "next/link";
import { noStore } from "next/cache";

export default function HomePage() {
  // 调用这个函数，告诉Next.js不要缓存当前组件的内容
  noStore();
  const value = Math.random();

  return (
    <main>
      <h1>App router</h1>
      <p>{value}</p>
      <Link href="/other">Other</Link>
    </main>
  );
}

这个方法更细粒度，只会影响当前组件，不会波及其他页面或者组件，非常适合局部动态的场景。

3. 客户端主动触发刷新（灵活度最高） #

如果你需要在客户端导航回来的时候，主动控制什么时候刷新内容，可以把需要动态的部分做成客户端组件，然后监听路由变化或者手动触发刷新：

首先创建一个客户端组件app/components/RandomValue.tsx：

"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";

export default function RandomValue() {
  const [value, setValue] = useState(Math.random());
  const router = useRouter();

  useEffect(() => {
    // 监听路由完成变化的事件，回到首页时更新数值
    const handleRouteChange = () => {
      // 如果你只是需要本地生成新的随机数，直接更新状态就行
      setValue(Math.random());
      // 如果需要从服务器重新获取数据（比如接口请求的内容），就用router.refresh()
      // router.refresh();
    };

    router.events.on("routeChangeComplete", handleRouteChange);
    // 组件卸载时记得移除监听
    return () => router.events.off("routeChangeComplete", handleRouteChange);
  }, [router]);

  return <p>{value}</p>;
}

然后在你的首页里导入这个组件：

import Link from "next/link";
import RandomValue from "./components/RandomValue";

export default function HomePage() {
  return (
    <main>
      <h1>App router</h1>
      <RandomValue />
      <Link href="/other">Other</Link>
    </main>
  );
}

这种方式最灵活，你可以根据业务逻辑控制什么时候刷新，比如只有从特定页面回来的时候才更新，或者点击某个按钮的时候刷新。

我自己做项目的时候，这几种方法都用过，根据场景选就行，应该能解决你的问题！

备注：内容来源于stack exchange，提问作者Avanak