如何用Next.js 13的Link组件切换时强制重载Test页面？

问题核心是Next.js 13 App Router默认对服务端fetch请求启用了缓存机制，导致通过Link导航时复用了之前缓存的页面内容，只有全页刷新才会重新请求数据源。以下是几种可行的解决方法：

1. 修改fetch的缓存策略（推荐服务端组件场景） #

在Test页面的服务端fetch请求中，显式指定缓存策略，强制每次请求都获取最新数据：

// app/test/page.js
async function TestPage() {
  // 方式1：禁用缓存，每次请求都校验并获取最新数据
  const res = await fetch('你的第三方数据源URL', { cache: 'no-cache' });
  
  // 方式2：设置revalidate为0，强制动态渲染（每次请求都重新生成页面）
  // const res = await fetch('你的第三方数据源URL', { next: { revalidate: 0 } });
  
  const data = await res.json();

  return (
    <div>
      {/* 渲染动态内容 */}
      <p>{data.content}</p>
    </div>
  );
}

export default TestPage;

• cache: 'no-cache'：告诉Next.js每次请求都要向数据源验证内容是否更新，若有新内容则返回最新值
• next: { revalidate: 0 }：将页面标记为动态渲染，完全跳过缓存，每次请求都重新执行服务端代码并获取数据

2. 使用revalidatePath手动触发页面重新验证 #

如果需要在导航时主动刷新特定页面的缓存，可以自定义客户端Link组件，点击时调用revalidatePath：

// app/components/CustomLink.js（客户端组件，必须加'use client'）
'use client';

import { Link } from 'next/link';
import { revalidatePath } from 'next/cache';

export default function CustomLink({ href, children }) {
  const handleNavigate = async () => {
    // 重新验证目标页面的路径，清除缓存
    if (href === '/test') {
      revalidatePath('/test');
    }
  };

  return <Link href={href} onClick={handleNavigate}>{children}</Link>;
}

然后在Home页面中使用这个自定义Link代替默认的next/link：

// app/page.js
import CustomLink from './components/CustomLink';

export default function Home() {
  return (
    <div>
      <h1>Home页面</h1>
      <CustomLink href="/test">前往Test页面</CustomLink>
    </div>
  );
}

每次点击链接导航到Test页面时，都会触发缓存重新验证，确保获取最新数据。

3. 改用客户端组件获取数据（适合无需SSR的场景） #

如果Test页面不需要服务端渲染，可以将其改为客户端组件，在组件挂载时发起请求（客户端fetch默认不缓存）：

// app/test/page.js
'use client';

import { useState, useEffect } from 'react';

export default function TestPage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchLatestData() {
      const res = await fetch('你的第三方数据源URL');
      const latestData = await res.json();
      setData(latestData);
      setLoading(false);
    }
    
    fetchLatestData();
  }, []);

  if (loading) return <div>加载中...</div>;

  return <p>{data.content}</p>;
}

这种方式下，每次通过Link导航到Test页面时，组件都会重新挂载并执行useEffect，从而获取最新的动态内容。

内容的提问来源于stack exchange，提问作者mat.twg