Table of Contents
Introduction
Caching is no longer an unfamiliar term for a web developer. We often hear about it when handling query requests on the server side, especially for frequently occurring and repetitive data. When processing data retrieval requests from the server, the responses can sometimes be repetitive, consuming a significant amount of time on the Front-end. To optimize this, we sometimes need to cache network requests on the Front-end, helping to optimize data retrieval requests on both sides.
The concept is very simple: there is a cache memory that can store objects of any type. Then, these cached objects become invalid if they exceed their designated storage time.
Implementation
According to the aforementioned concept, we will create a function to fetch the API and an object to store the results as follows:
Before fetching the API, we will check if the cacheStore object contains a unique key (uniqKey) assigned to the previously cached data.
- If it does, return the result associated with that
uniqKey. - If not, execute the fetch API function and store the returned result in
cacheStore.
However, this function will only return cached data after the fetch function has been executed. Simply put, when you complete the first fetch, the second and third fetches will use the cached data from the first. But if you perform all three fetches at the same time, they won’t use the cache from the first fetch, and all three fetch functions will be triggered in the network.
Therefore, we need a different approach to ensure that when multiple functions are called simultaneously, only one fetch function is executed, and all functions share the same data.
We will still store the data and the cacheStore object as before. However, instead of storing the result returned by the fetch function, we will store an executed function in the cacheStore. Here, by declaring a new Promise(), we execute the fetch function inside this Promise and store the result resolved or rejected by the Promise. Therefore, when multiple fetchAPI() functions are called, they all retrieve the same result from one promise and do not trigger additional fetch functions inside that promise.
As shown in the result below, when calling fetchAPI() three times simultaneously, we will have three results logged to the console and only one fetch on the Network.
Conclusion
Based on the simple example above, we have understood the concept and method for client-side data caching. However, implementing caching needs to be done carefully to ensure data consistency and reliability. It is essential to accurately determine the cache’s Time to Live (TTL) to ensure that the data does not become outdated and to apply cache invalidation strategies when necessary.
In summary, caching data retrieved from an API not only optimizes the application’s performance but also enhances the user experience. Applying caching methods appropriately will bring significant benefits to both users and developers, making the application more efficient and reliable.
Previous post