Introduction

React is a library for building user interfaces with has got extremely popular due to its simplicity and multivaried uses. It is extremely powerful and widely used throughout the industry for several frontend applications.

When working with React, there is a high possibility that several components in your app would make some API calls to retrieve some data that will displayed or used otherwise in your app. However when the component is reloaded or re-rendered, without any caching, it would end up making the same API calls again fetching the same data again. This, in turn, would increase the load for the frontend (as it would have to await the response for the same data) as well as the backend (as it would have to respond to the same API call again). This is a very bad practice as it overall ruins the user experience due to high loading time.

A simple solution to this problem is caching. Frontend Caching is an optimisation techique that follows the simple principal of storing the data after making an API call.

Now there are several methods to cache the data, some which use external libraries / packages, others which allow you to create your own caching solution. In this tutorial, we will be taking a look at SWR, which is a hooks library for React that allows us to cache the data from our API calls with minimal code and smart optimisations.

SWR

The name “SWR” is derived from stale-while-revalidate . SWR is a library made by Vercel (creators of Next.js). It is extremely lightweight so it adds minimal load on your application and brings in vast improvements to it.

With SWR, components will get a stream of data updates constantly and automatically. And the UI will be always fast and reactive.

What makes SWR better than other caching solutions ?

Most other caching solutions follow a simple approach. When an API call is made through them, they check if the data is available for it. If not, they make the API request, get the data and store it locally. They pass on that data as response. When the same request is made again, they return the cached data only saving time.

This solution is efficient for static data APIs, however consider the situation that if we were not working with a static API. Consider a situation when the data gets updated at the backend between the first and the second API call. This means that when the second call is made, we end up with old unreliable data.

SWR solves this problem in a very simple manner. When an API request is made through SWR, and the data is already cached for the request, it returns the data from its cache. However it still goes on to make a new request to the API as well asynchronously. If the new data that is fetched matches with the old cached data, it does not nothing. However if the two do not match, it finally comes up with the up-to-date data. This ensures that the user always ends up with the latest data and the UI is still fast and reactive. The components get a stream constantly and automatically.

Let’s try it out

Here’s a short snippet on how to use SWR.

The code implementation is extremely simple. It’s just one line of code.

Instead of making the request directly using the fetch API, we use the useSWR hook and pass our fetch() as a callback function to it along with the url. You can axios too if you want.

Everything else is handled out of the box by SWR itself. You do not have to do anything. It’s so simple !

Does it work with SSR ?

Yes. It does. Server Side Rendering, or simply SSR, is getting extremely popular especially with Next.js (for React) and Nuxt.js (for Vue). Since SWR is a library for React, we are only going to talk about Next.js here.

Since Next.js and SWR are both made by Vercel, it would have been a bit weird if the two were not compatible. Thankfully they are.

If the above application had to be made with Next.js SSR and SWR caching, it would have looked something like this.

Conclusion

SWR is by far the best caching solution I have come across. It’s extremely powerful, easy to use, fast and lightweight. It ticks all the boxes and has no drawbacks.

If you are looking for a caching solution for your React application, you cannot go wrong with SWR.

Further Reading

Check out the official documentation for SWR here.

If you are looking for more examples, I recommend checking out the examples that are covered in the documentation itself. They are self explanatory and will solve most of your doubts.

If you have any further doubts, feel free to comment down below and I would be glad to help you out.

Happy Coding !

References