SWR预取数据时如何避免重复请求？

Mr-振杰提问于 2026-02-17 15:50:24 阅读 25

优化

在列表页预取详情数据时，发现每次滚动加载新条目都会触发重复的SWR请求。我尝试用useEffect结合swr/mutate缓存数据，但控制台还是显示重复的GET请求，该怎么优化？


import useSwr from 'swr'

function ListPage() {
  const { data: items } = useSwr('/api/items')
  const mutate = useSwrConfig().mutate

  useEffect(() => {
    items?.forEach(item => {
      mutate(/api/item/${item.id}, { data: item }, { revalidate: false })
    })
  }, [items, mutate])

  return items?.map(item => (
    <ItemPreview key={item.id} item={item} />
  ))
}

问题出现在点击预览项进入详情页时，明明缓存存在却依然发送了新请求，页面加载动画还会闪一下。这种预取场景应该怎么做才对？

我来解答赞 7 收藏

反馈

1 条解答

百里素香 Lv1

用 useSWRPreload 或者手动控制 revalidate 的时机，别让详情页的请求重复触发。把预取逻辑放到列表滚动加载的地方，确保只在必要时调用。

function ListPage() {

  const { data: items } = useSwr('/api/items')

  const { cache } = useSwrConfig()



  useEffect(() => {

    items?.forEach(item => {

      if (!cache.has(/api/item/${item.id})) {

        cache.set(/api/item/${item.id}, item)

      }

    })

  }, [items, cache])



  return items?.map(item => (

    

  ))

}

差不多这样就行，关键是提前把数据塞到缓存里，详情页直接读缓存，别再触发网络请求了。

2026-02-17 16:00