Caching is notoriously hard and that’s why in the vast majority of circumstances we don’t want to use a one-size-fits-all caching layer on the projects we create. If you are seeing first time loads that are far too long and you’ve considered all of your options from [[Being mindful of initial load times]], then caching may be a good choice for you.
## Stale-while-revalidate
A cache is a balance between immediate access to data and the how stale that data is. Stale-while-revalidate is pretty much what it says on the tin: while you are fetching the new data, show the old data immediately. It means you don’t have a long upfront load for data but can lead to “content flash” as the underlying data gets re-rendered when it’s fresh. You’re not reducing the amount of requests with this method, just the perceived speed.
- Do use this when all other options have failed you.
- Do use this for predictable and okay-to-be-a-bit-old UI, i.e a grid of thumbnails, tables, results.
- Don’t use this with data that is “dangerous to cache”. i.e embedded & expire-able authentication or content.
- Do use this for slow loading & infrequently changing data. The more changes between loads, the more jank when loading data. On the whole, prefer loading over jank.
- Don’t use this for visibly large, above the fold content that changes frequently. Again prefer loading over jank.
## Local-first
If you’re finding that you’re wanting to cache data for the following reasons:
- You want to reduce network requests
- You want the app to work offline
- You want a more granular way of updating data
I would advise that you go for something local-first oriented like [Replicache](https://replicache.dev) or [WatermelonDB](https://watermelondb.dev/docs). This is the point at which you’ll need to start changing the backend implementation to align with these models.
These technologies and concepts are incredibly powerful but my only advice is to get everyone onboard and give in to the paradigm. Doing a half arsed implementation is by far the worst of both worlds.