NextJS中使用Link跳转传唯一ID及解决缓存问题的方法

针对你遇到的详情页缓存过期问题，这里提供几个实用的优化方案：

1. 路由参数配合缓存控制头 #

如果使用Next.js，优先用动态路由（如pages/user/[id].js）来获取ID，同时通过fetch的请求头强制控制缓存行为，避免浏览器复用过期缓存：

客户端渲染方案 #

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function UserDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [user, setUser] = useState(null);

  useEffect(() => {
    if (!id) return;

    fetch(`https://userdatabase/${id}`, {
      headers: {
        // 完全禁用缓存，每次请求都拉最新数据
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0'
      }
    })
    .then(res => res.json())
    .then(data => setUser(data));
  }, [id]);

  if (!user) return <div>Loading...</div>;
  return <div><h2>{user.name}</h2><p>{user.details}</p></div>;
}

服务器端渲染方案（Next.js） #

用getServerSideProps每次请求都在服务端拉取最新数据，彻底绕过客户端缓存：

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://userdatabase/${id}`, {
    headers: { 'Cache-Control': 'no-cache' }
  });
  const user = await res.json();

  return { props: { user } };
}

export default function UserDetail({ user }) {
  if (!user) return <div>Loading...</div>;
  return <div><h2>{user.name}</h2><p>{user.details}</p></div>;
}

2. 给请求添加时间戳参数 #

在URL后拼接随机时间戳，让浏览器识别为全新请求，绕过缓存：

useEffect(() => {
  if (!id) return;

  const timestamp = Date.now();
  fetch(`https://userdatabase/${id}?t=${timestamp}`)
    .then(res => res.json())
    .then(data => setUser(data));
}, [id]);

3. 使用数据缓存管理库（SWR/React Query） #

这类库自带缓存失效、自动刷新机制，能更精细化控制缓存策略，比如页面聚焦时刷新、定时刷新等。以SWR为例：

import useSWR from 'swr';
import { useRouter } from 'next/router';

// 封装fetch函数
const fetcher = url => fetch(url).then(res => res.json());

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

  const { data: user, error } = useSWR(
    id ? `https://userdatabase/${id}` : null,
    fetcher,
    {
      revalidateOnFocus: true, // 页面重新聚焦时自动刷新数据
      revalidateInterval: 60000, // 每60秒自动刷新一次
      cacheTime: 300000 // 缓存5分钟后标记为失效
    }
  );

  if (error) return <div>加载用户数据失败</div>;
  if (!user) return <div>Loading...</div>;
  return <div><h2>{user.name}</h2><p>{user.details}</p></div>;
}

4. 服务端配置响应缓存头 #

如果你能控制后端接口，在返回用户详情时设置合理的Cache-Control响应头，比如：

Cache-Control: max-age=300, must-revalidate

这表示浏览器可以缓存数据5分钟，过期后必须重新请求验证数据有效性。

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