我一直想知道在UI组件内部的内存中缓存/保存数据与在客户端浏览器中缓存HTTP的cache-control
标头之间的差异。我认为像react query这样的库做了前者-它将获取的数据存储在一些全局存储中,并允许用户使用staleTime
和cacheTime
来微调数据的新鲜度。
但是我想知道我们是否可以通过利用浏览器的缓存来实现缓存——每种方法的优缺点是什么?
对我来说似乎有问题,如果我们实现一个组件或库的内存缓存机制,如React查询,但它与http缓存冲突-说Cache-control: no-store
,我们不应该在组件或库中缓存它。例如,有效期为30秒的QR码。我想知道是否有一种方法可以自动为后端发送的http响应头生成组件或库的配置。但是我不知道怎样才能做到。
HTTP浏览器缓存和内存缓存(又名应用程序状态)是两个不同的概念
HTTP浏览器缓存用于加快客户端与服务器的交互。它的内容是二进制blob/文本。应用程序状态是组件共享并用于呈现UI的结构化数据。
在你的QR码例子中,你可以用一种在渲染时获取QR码数据的方式来实现这个组件,这只需要使用浏览器缓存。但是,如果你需要与其他组件共享获取的结果,例如currentUser info,那么你就需要将其放入某种应用程序缓存中,以便其他组件可以利用相同的应用程序状态并呈现一致的结果。