Next.js中fetch路由缓存配置失效，请求问题排查指导

你的缓存不生效的核心原因是：Next.js 的 next.revalidate 缓存策略仅作用于服务器端环境的请求，而你是在客户端组件的 useEffect 中发起的请求，这个参数在这里不会生效。

原因拆解 #

• 你当前的列表页和详情页都是客户端组件（使用了 useState、useEffect、useRouter 这些客户端专属 Hook），组件内的 fetch 是在浏览器端执行的。
• next: { revalidate: ... } 是 Next.js 为服务器端数据获取设计的缓存规则，仅在 Server Components、getServerSideProps、静态生成的 getStaticProps、Route Handlers 中的 fetch 中生效。

解决方案一：改用 Server Component 实现缓存（推荐） #

将详情页改为 Server Component，直接在组件顶层发起 fetch，Next.js 会自动处理缓存逻辑：

// [id].js（文章详情页）
export default async function PostPage({ params }) {
  // 这里的 fetch 运行在服务器端，next.revalidate 参数会生效
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`, {
    next: { revalidate: 1000 } // 缓存有效期1000秒
  });
  const post = await res.json();

  return (
    <Layout>
      <Header>
        <div className={styles.header}>{post.title}</div>
      </Header>
      <div>{post.body}</div>
    </Layout>
  );
}

同时列表页也可以改成 Server Component 优化缓存：

// index.js（文章列表页）
export default async function Home() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", { 
    next: { revalidate: 10 } 
  });
  const postData = await res.json();

  const cardArr = postData.map((post) => <Card data={post} key={post.id} />);

  return (
    <Layout>
      <Header>
        <div>Posts</div>
      </Header>
      {cardArr}
    </Layout>
  );
}

解决方案二：客户端手动实现缓存（如果必须保留客户端组件） #

如果你的业务场景需要保留客户端组件，可以用 React Query 这类库实现客户端缓存：

1. 安装依赖：

npm install @tanstack/react-query

2. 配置 Query 全局 Provider（在 _app.js 或 layout.js 中）：

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

3. 修改详情页使用 React Query 缓存：

// [id].js（文章详情页）
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  const { id } = router.query;

  const { data: post } = useQuery({
    queryKey: ['post', id], // 用id作为缓存键，确保不同文章缓存独立
    queryFn: async () => {
      const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
      return res.json();
    },
    staleTime: 1000 * 1000, // 缓存有效期1000秒
    enabled: !!id // 确保id存在后再发起请求
  });

  if (!post) return <div>Loading...</div>;

  return (
    <Layout>
      <Header>
        <div className={styles.header}>{post.title}</div>
      </Header>
      <div>{post.body}</div>
    </Layout>
  );
}

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