SWR缓存键已存在却仍重复刷新的原因及解决办法

我通过const { cache } = useSWRConfig();打印了所有缓存，当之前已发起过某一请求后，在网页上重复执行该操作时仍会再次发起请求。使用技术栈：React、Next.js、SSR。

可能原因 #

• 默认自动重新验证机制：SWR默认会在组件挂载、窗口聚焦、网络恢复时触发重新验证，即便缓存存在，也会发起请求同步最新数据。
• 缓存键不匹配：两次请求的key存在细微差异（比如参数顺序、数据类型不一致，比如数字1和字符串"1"），会被判定为不同缓存项，导致重复请求。
• 缓存数据过期：SWR默认缓存过期时间为5分钟，过期后会自动发起新请求获取数据。
• SSR缓存同步问题：Next.js SSR场景下，服务端生成的缓存未正确同步到客户端，客户端挂载后会重新发起请求。

解决办法 #

• 关闭不必要的自动重新验证：在useSWR配置中按需禁用自动重新验证规则：

  useSWR('/api/your-data', fetcher, {
    revalidateOnMount: false, // 组件挂载时不验证
    revalidateOnFocus: false, // 窗口聚焦时不验证
    revalidateOnReconnect: false // 网络恢复时不验证
  })
  

• 确保缓存键完全一致：统一请求键的生成格式，避免因格式差异导致缓存不命中：

  // 比如将参数转为标准化的JSON字符串
  const requestKey = `/api/data?params=${JSON.stringify({ id: 1, type: 'user' })}`;
  useSWR(requestKey, fetcher);
  

• 调整缓存过期与去重规则：禁用自动定时刷新或延长去重时间，减少重复请求：

  useSWR('/api/your-data', fetcher, {
    refreshInterval: 0, // 禁用自动定时刷新
    dedupingInterval: 60000 // 1分钟内相同请求合并为一次
  })
  

• SSR场景同步服务端缓存：在Next.js的服务端数据预取方法中获取数据，通过SWRConfig传递初始缓存给客户端：

  export async function getServerSideProps() {
    const data = await fetcher('/api/your-data');
    return {
      props: {
        initialCache: { '/api/your-data': data }
      }
    };
  }
  
  export default function Page({ initialCache }) {
    return (
      <SWRConfig value={{ provider: () => new Map(initialCache) }}>
        <YourComponent />
      </SWRConfig>
    );
  }
  

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