Home System Design Tutorial Using cache and Redux to make your App blazing fast

Using cache and Redux to make your App blazing fast

Let’s say we are designing a social networking app and call it Nlognconnect and we will try to make is fast using cache first policy and Redux state management tool.

Nlognconnect will work by automatically pushing data to the users/client device, instead of waiting for a client to explicitly request it. But there is an issue using only this approach and that is a blank screen for a while.

As a user turns up the Nlognconnect app, and if his bandwidth/connectivity is low, in such case user will experience an empty white screen for a while until something is not fetched from the server. This behavior is certainly not desirable.

The only way to render content on the users’ phone, as soon as he/she fires up the Nlognconnect app is to use the Cache first rendering approach which means painting stale/cached news feeds on the users’ phone for a short period of time. This means whenever a user opens up the Nlognconnect app, they will see a cached copy of old feeds rendered on their phone, until the fresh stories/feed is not ready. Once fresh data is fully fetched, it will replace the cached data.

Hence will use Redux to manage the state for implementing the above solution. We will store a subset of the Redux store on the client in an indexedDB table and then render the store when the Nlognconnect app first loads.

Redux + cache to improve rendering time.

The above problem sounds like a good solution, but there is a problem with the above solution. If the user interacts with the cached state, the changes will be lost, when the new state arrives from the server and populates itself on the user screen.

Let’s say, we have cached, 2 posts for a user. When the user fires up the application and is not connected to the internet or fresh data is not ready. The user will only see the old feeds. In case the user will interact with any post, say he likes one post, but once the latest feeds are ready, it will overwrite that post with a copy that doesn’t include the like action that the user applied to the cached copy (as shown in the diagram).

The naive way of using Redux to display a cached post
The naive way of using Redux to display a cached post. Source: Instagram Engineering Blog.

This is a serious problem. To solve this issue we have to design our app in such a way that all the interaction with the cached data, should not be lost, but staged with the freshly fetched data and these interactions become permanent.

The flow of fetching new post should be as follows:

  1. As soon as page loads, display the cached state to the user and send a request for new data to the server.
  2. Create a staged subset of the Redux state.
  3. While the fresh content is being fetched, we have to store every interaction with the cached posts.
  4. Once the request is ready, we apply all the interaction with the cached post and the fresh data to the staged state.
  5. Replace the current state with the committed staged state.

The efficient way of using Redux to display a cached post.
The efficient way of using Redux to display a cached post. Source: Instagram Engineering Blog.

Using cache first policy and redux for rendering will provide a significant improvement in the rendering time.

This is how we can efficiently use Redux display cached post to a user and make his interactions permanent giving the user a feel, that whatever he sees is fresh and the app is blazing fast.

Did, we miss something, or do you want to add some other key points?🤔
Please comment.

Do you know System Design is a very important topic in product based company interviews and almost every tech giant asks it? At Nlogn we have a dedicated section for system design to help you prepare. Read here.  

Subscribe to our weekly newsletter

Join our community of 1000+ developers and stay updated with the fast moving world of computer science

We promise, we won't spam
Even we hate spam as much as you hate them

LEAVE A REPLY

Please enter your comment!
Please enter your name here