Next.js服务端组件加载时如何重新调用FETCH API？

云上老周

2026-7-7

解决Next.js服务端组件路由导航时不重新获取数据的问题

你设置了cache: 'no-store'但路由跳转时API仍不重新调用，可尝试以下几种方案：

1. 明确设置页面级别的`revalidate: 0`

在服务端组件所在页面添加export const revalidate = 0，强制页面每次请求都重新渲染，避免Next.js缓存服务端组件的输出：

export const revalidate = 0; // 禁用页面缓存，每次请求都重新执行服务端组件代码

const Home = async () => {
  const data = await getData();
  return <div>Home</div>;
};

export default Home;

2. 完善`fetch`的缓存配置

虽然cache: 'no-store'等价于revalidate: 0，但同时明确设置next.revalidate: 0可以确保覆盖任何全局缓存配置：

const garageData = await fetch(
  `${process.env.NEXT_PUBLIC_BACKEND_URL}users`,
  {
    cache: 'no-store',
    next: { 
      tags: ['user'],
      revalidate: 0 // 强制该fetch请求不缓存
    },
    method: 'GET',
    headers: {
      Authorization: `Bearer ${data?.jwtToken}`,
    },
  }
);

3. 关闭页面预取

如果使用Link组件时开启了预取（默认开启），Next.js会提前加载页面数据并缓存，导致路由跳转时复用缓存数据。可以关闭目标页面的预取：

<Link href="/home" prefetch={false}>跳转到首页</Link>

4. 强制组件动态渲染

如果以上方法无效，使用next/dynamic强制组件每次都动态渲染：

import dynamic from 'next/dynamic';

// 强制服务端组件每次请求都重新渲染
const Home = dynamic(() => import('./Home'), {
  ssr: true,
  dynamic: 'force-dynamic',
});

export default Home;