I been wondering what are the differences between caching/saving data in memory inside a UI component vs. caching in client's browser vis HTTP's cache-control header. I think libraries like react query does the former - it stores the fetched data inside some global store and allows users to use staleTime and cacheTime to fine tune the data-fresheness.
But I wonder if we can just achieve caching by leveraging browser's cache - what are the pros and cons with each approach.
It seems problematic to me that if we implement an in memory cache mechanism for a component or library like React query but it conflicts with HTTP-Cache - says Cache-control: no-store, we should not cache it in the component or the library. For example, an QR code with a 30s validity. I wonder if there is a way to auto generate the config for the component or library out of the http response headers that the backend sends. But I am not sure how I can do that.
HTTP Browser Cache and In Memory Cache ( A.K.A Application State ) are two different concepts.
HTTP Browser Cache is used to speed up client interactions with servers. Its contents are binary blobs / text. Application State is structured data that your components share and use to render UI.
For your QR Code example, you can probably implement the component in a way that fetches the QR code data on render, this uses browser cache only. But if you need to share fetched results with other components, e.g. currentUser info, then you will need to put it into some sort of application cache so other components can leverage the same application state and render consistent results.