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

Question

当我阅读 SWR React hook 文档和 Stale-While-Revalidate 方法时，似乎 swr 仅使用缓存数据作为短时间占位符，以快速向用户显示结果。 （不要误会我的意思，我仍然认为 swr 有很多好处）

我想将 SWR 与 HTTP 静态内容缓存进行比较以使事情变得清楚。

就 HTTP 静态内容缓存（又称 HTTP 缓存）而言，

1. 客户端获取带有 Cache-Control 或 Expires 标头的静态内容。
2. 下次需要获取相同内容时，只要基于Cache-Control或Expires，缓存文件可用且有效。它使用缓存的数据并且不向服务器发送HTTP 请求。

然而，当涉及到swr useSWR时，

1. 它将HTTP响应数据保存到本地缓存中。
2. 下次需要获取相同的数据。它使用缓存中的数据（如果存在）并向服务器发送 HTTP 请求（重新验证）来检查数据是否已更改。

我知道 HTTP 缓存和 swr React hook 有很多功能，但这只是 HTTP 缓存和 swr React hook 的简要总结。

我的问题是，

如果每次使用缓存数据时 swr 都必须重新验证，那么除了来自多个组件的同一 API URL 的并发请求之外，它不会减少请求数量，对吗？

如果是的话，这种缓存机制是否可以更快地向用户显示数据，并且可能会阻止来自多个组件对同一 API URL 的多个并发请求？

我对 swr 很陌生，如果我误解了，请告诉我。

谢谢！

swr 文档：https://swr.vercel.app/

Mozilla 上的 HTTP 缓存：https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

Answer 1

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

链接：SWR 文档

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

Answer 2

您还可以在配置选项中将 revalidateIfStale 设置为 false：

const { data, isLoading } = useSWR('/albumTypes', { revalidateIfStale: false });