Next.js staleTimes对router.back()无效的问题求可行解决方案

针对这个问题，这里有几个可行的解决思路：

1. 保存上一页完整路径，用 router.push 替代 router.back() #

既然列表页带筛选参数的路径没法直接写死，那就进入详情页时把列表页的完整路径（包括查询参数）存起来，返回时直接跳转到这个路径，这样 staleTimes 规则就能正常生效。

列表页的跳转链接可以这么写：

<Link 
  href={`/list/${id}`} 
  state={{ prevPath: window.location.href }}
>
  查看详情
</Link>

详情页的返回按钮逻辑改成：

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

export default function DetailPage() {
  const router = useRouter();

  const handleBack = () => {
    // 从路由状态里取出之前保存的列表页路径
    const prevPath = window.history.state?.prevPath;
    if (prevPath) {
      router.push(prevPath);
    } else {
      // 兜底用 router.back()
      router.back();
    }
  };

  return <button onClick={handleBack}>返回列表</button>;
}

2. 列表页监听路由变化，主动触发数据刷新 #

如果坚持要用 router.back()，可以在列表页的客户端组件里监听路由，每次回到列表页时主动调用 revalidatePath 刷新数据：

'use client';
import { usePathname, useSearchParams, useEffect } from 'next/navigation';
import { revalidatePath } from 'next/cache';

export default function ListPage() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    // 每次进入列表页，重新验证当前路径的缓存
    const fullPath = `${pathname}?${searchParams.toString()}`;
    revalidatePath(fullPath);
  }, [pathname, searchParams]);

  // 这里写列表渲染逻辑
}

3. 直接在数据获取环节禁用缓存 #

如果希望列表页数据始终保持最新，不用依赖 staleTimes，可以在列表页的数据获取函数里直接设置 revalidate: 0：

• 若使用 Pages Router：

export async function getServerSideProps() {
  const data = await fetch('/api/list');
  return {
    props: { data },
    revalidate: 0 // 强制每次都获取最新数据
  };
}

• 若使用 App Router：

async function getListData() {
  const res = await fetch('/api/list', { next: { revalidate: 0 } });
  return res.json();
}

export default async function ListPage() {
  const data = await getListData();
  // 渲染列表
}

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