I have been working on my React + Firebase app for the past year and I've come to the realization that I will need a caching layer to avoid unnecessary Firestore costs.
My idea for the flow is as follows:
- Always try to fetch from IndexedDB first; if there is no data inside for the specific queried collection, move to step 2
- Fetch data from the server, store it inside IndexedDB, and server it to the UI
- Use Firebase's onSnapshot() functionality to keep the data inside IndexedDB fresh
I do not have much experience with caching layers, but the only potential drawback of this strategy that I see is that I will need to keep a process constantly running in the background that listens to all the collections inside the Firebase DB to keep the data inside IndexedDB fresh.
Is this a viable strategy when it comes to making sure the user always sees fresh data? What are the potential drawbacks?
I know there are other strategies such as paginating queries but I find it cumbersome and not that intuitive due to my app's architecture.
