Database in browser use case : Caching
Most modern applications use CDN to cache their data and improve user experience by serving the requested data as quick as possible.
However, we realise that CDN is also an IO request. Can we do better here? Yes we can try with database in browser approach.
Database in browser is possible thanks to webassembly technology. And here is how you can design our web app using this approach
Imagine we have to make a webapp. Instead of caching data in CDN itself, what we do is on first load of webapp we can get data from backend/CDN and store it in browser database (sqlite). Next time data is requested, we will fetch it from browser database instead of going to CDN and introducing a network hop.
Below is the demo for visualisation ( app is developed using c#, blazor and webassembly)
From demo, you will see — On first load, data is coming from backend. I upload the data to browser DB and then when data is fetched, we immediately see the query result.
You might wonder if you want to update that browser database, we can do that in background. Based on all these points.
In this approach, one will need to understand what kind of data one wants to store and what will be dataset size etc.
Hope you enjoyed reading this one.
Inspiration for this post :
~ Happy Coding
