How To Dev

Introduction You can view the theoretical content about Caching strategies presented here These Caching Patterns are not only used on the Backend but can also be implemented on the Frontend You only need to replace the role of Redis typically used with Memory (or use Local Storage, IndexedDB on the Browser ), while replacing the query fetching data from the Database with response data from the Server API In this article, I will guide you on using React Query combined with IndexedDB (using @tanstack/react-query-persist-client and idb-keyval ) to implement Caching strategies in a simple and effective way Cache patterns CACHE-ASIDE (Lazy Loading) & READ-THROUGH This is the default mechanism of useQuery . Cache-Aside : Check the cache first, if it does not exist, fetch from the API and save to the cache. Read-Through : The client interacts through an abstraction layer (hook) and the hook automatically decides whether to retrieve data from the cache or the server. REFRESH-AHEA...

Introduction In this article, we will learn about popular Caching strategies used today. It should be noted that applying cache is inherently a trade-off, it helps improve system performance but increases complexity, while also requiring acceptance that data retrieved by users might not be the latest. When using cache, you need to answer the question of which entity will be responsible for writing to the cache and when to write it. Below are popular Cache Patterns . CACHE-ASIDE (LAZY LOADING) The app manages the cache itself, reading from cache first and upon a cache miss, it queries the Database and then writes back to the cache. This is the most popular type and even if the cache fails, the app remains functional. For each cache miss, it always takes 3 processing steps including Reading cache -> Querying Database -> Writing cache. The first read is always slow (cold start) because there is no cache initially. Used when reading frequently, writing rarely and ac...