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

t98cgbkg  于 2023-11-18  发布在  React
关注(0)|答案(2)|浏览(135)

当我阅读SWR react hook文档和Stale-While-Revalidate方法时,似乎swr使用缓存数据只是为了短时间占位符快速向用户显示结果。(不要误会我,我仍然认为swr有很多好处)
我想将SWR与HTTP静态内容缓存进行比较,以使事情更清楚。
在HTTP静态内容缓存(HTTP缓存)方面,
1.客户端获取带有Cache-ControlExpires标头的静态内容。
1.下一次需要获取相同的内容时,只要缓存的文件可用并且基于Cache-ControlExpires有效。它使用缓存的数据并且不向服务器发送HTTP请求
然而,当涉及到swr useSWR时,
1.它将HTTP响应数据保存到本地缓存。
1.下一次需要获取相同的数据时。它使用缓存中的数据(如果存在),并发送HTTP请求到服务器(重新验证)以检查数据是否已更改。
我知道HTTP缓存和swr react hook有很多功能,但这只是HTTP缓存和swr react hook的简要总结。
我的问题是
如果swr必须在每次使用缓存数据时重新验证,那么除了来自多个组件的同一API URL的并发请求之外,它不会减少请求的数量,对吗?
如果是这样的话,这种缓存机制是否可以更快地向用户显示数据,并可能阻止来自多个组件的同一API URL的多个并发请求?
我对swr很陌生,如果我误解了请告诉我。
谢谢你,谢谢
软件文档:https://swr.vercel.app/
Mozilla上的HTTP缓存:https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

b1uwtaje

b1uwtaje1#

有一个名为dedupingInterval的选项,默认设置为2000 ms。如果多个组件在此时间跨度内请求相同的缓存键/url,则不会发送重新验证的请求。它可以通过SWRConfig上下文全局设置,也可以在选项中为每个useSWR(key, fetcher, options)钩子设置。
友情链接:SWR docs
还有更多的功能,比如使用useSWRImmutable(key, fetcher)而不是useSWR(key, fetcher)来禁用重新验证。

vwhgwdsa

vwhgwdsa2#

您也可以在配置选项中将revalidateIfStale设置为false:

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

字符串

相关问题