即使存在缓存数据，每次使用数据时，swr useSWR 挂钩是否都必须发送 HTTP 请求以进行重新验证？答案

【问题标题】：Does swr useSWR hook have to send HTTP request for revalidation every time the data is used even though cached data exist?即使存在缓存数据，每次使用数据时，swr useSWR 挂钩是否都必须发送 HTTP 请求以进行重新验证？
【发布时间】：2022-08-05 19:46:51
【问题描述】：

当我阅读 SWR 反应钩子文档和 Stale-While-Revalidate 方法时，似乎 swr 只是在短时间内使用缓存数据占位符来快速向用户显示结果。（别误会我还是觉得swr有很多好处）

我想将 SWR 与 HTTP 静态内容缓存进行比较以说明问题。

就 HTTP 静态内容缓存又名 HTTP 缓存而言，

客户端获取Cache-Control 或Expires 标头附带的静态内容。
下次需要提取相同的内容时，只要缓存文件可用且基于Cache-Control或Expires有效。它使用缓存的数据和不发送 HTTP 请求到服务器。
然而，当谈到 swr useSWR，
1. 它将 HTTP 响应数据保存到本地缓存。
2. 下次需要获取相同的数据。它使用缓存中的数据（如果存在）和发送 HTTP 请求到服务器（重新验证）以检查数据是否已更改。
  我知道 HTTP 缓存和 swr react 钩子有很多更多的功能，但这只是 HTTP 缓存和 swr 反应钩子的简要总结。
  
  我的问题是
  
  如果 swr 每次使用缓存数据时都必须重新验证，除了来自多个组件的同一 API URL 的并发请求之外，它不会减少请求的数量，对吧？
  
  如果是这样，这种缓存机制是否可以更快地向用户显示数据，并且可能会阻止来自多个组件的同一 API URL 的多个并发请求？
  
  我对 swr 很陌生，如果我误解了，请告诉我。
  
  谢谢！
  
  swr 文档：https://swr.vercel.app/
  
  Mozilla 上的 HTTP 缓存：https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

\"swr 必须在每次使用缓存数据时重新验证\"- 事实并非如此。有一段时间 SWR 只会使用缓存的数据，不会发送任何请求。在这段时间过去后，再次需要数据，然后将发出新请求以重新验证数据。

标签： reactjs caching next.js swr

【解决方案1】：

有一个名为 dedupingInterval 的选项默认设置为 2000 毫秒。如果多个组件在此时间跨度内请求相同的缓存键/url，则不会发送重新验证请求。它可以使用 SWRConfig 上下文全局设置，也可以为每个 useSWR(key, fetcher, options) 钩子内部选项设置。

链接：SWR docs

还有更多功能，例如使用 useSWRImmutable(key, fetcher) 而不是 useSWR(key, fetcher) 来完全禁用重新验证。

【讨论】：