为什么useSWRInfinite每次点击加载更多都会向后台发起两次请求？

根因分析 #

该现象是SWR默认的数据重验证机制导致的：

• 每次点击按钮调用setSize更新加载页数时，组件会触发重新渲染
• SWR默认会在组件重渲染时，对所有已缓存的请求key做重验证，用来保证前端展示的是后端最新数据
• 你第一页page=0的请求是最早被缓存的，所以每次组件重渲染时，SWR都会先重验证这个已缓存的page=0请求，之后再请求新的页数对应接口，就出现了你观察到的每次加载更多都先请求page=0的情况。
  如果是在开发环境下，React 18默认开启的严格模式会让组件重复挂载一次，也可能会额外多触发一次初始请求，但你遇到的每次点击都重复请求page=0的问题核心还是SWR的默认重验证逻辑。

修复方案 #

在useSWRInfinite的配置项中关闭不必要的重验证规则即可，根据你的业务场景选择配置：

const { data, size, setSize } = useSWRInfinite(
  (index) => `/api/user?page=${index}&per_page=2`,
  (url) => fetch(url).then((r) => r.json()),
  { 
    initialSize: 1,
    // 关闭重渲染时对已缓存数据的重验证
    revalidateIfStale: false,
    // 不需要窗口聚焦时重验证可关闭
    revalidateOnFocus: false,
    // 不需要网络恢复时重验证可关闭
    revalidateOnReconnect: false
  }
)

如果你的分页数据是不会频繁更新的静态内容，可以额外设置去重间隔来进一步避免重复请求：

{
  initialSize: 1,
  revalidateIfStale: false,
  // 1小时内相同key的请求不会重复触发
  dedupingInterval: 3600000
}

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