Next.js is a very successful web framework which brings together server side rendering and static site generation. SSG speeds up your web site thanks to CDN caching meanwhile SSR helps you with SEO and dynamic data.
Server side rendering is a great feature which helps you to write full stack applications. But if you are not careful, the performance of your Next.js website can be affected easily. In this blog post, I will explain how to leverage Redis to speed up your Next.js API calls. Before that I will briefly mention a simpler way to improve your performance.
SWR is a very smart data fetching library. It uses the HTTP cache invalidation strategy (stale-while-revalidate) described by HTTP RFC 5861. When you call an API with SWR, it instantly returns the cached data but asynchronously it fetches the current data and updates your UI. You can also set refreshInterval depending on your tolerance to staleness.
In the above code, user API will be refreshed every 2 seconds.
SWR is very simple and effective. But there are cases you will need a server side caching:
- Client side caching improves the performance for the clients. But if the number of clients is high, you can experience high load on the server side resources which will eventually affect the client side performance too.
- If you are consuming an external API with a quota, you will want to control the API usage on the server side. Otherwise, too many clients will consume the API quickly.
- If you have resources calculated, fetched or processed at the server side using dynamic inputs, client side caching will not be very useful.
We will use Redis to cache the responses from Covid API so:
- The response will be much faster. If you check the website, you will see that calling the Covid API is hundreds of milliseconds while fetching from Redis is 1-2 milliseconds.
- We will not overwhelm the Covid API with too many requests.
The code first checks if we have the API result cached in the Redis. If not, we will get the all country list from the Covid API and sort them by current day’s number of cases and save the top 10 to Redis. While saving to Redis, we set the "EX" 60 parameter which means that Redis will evict the entry in 60 seconds.
The UI is a simple React code. We fetch the data from API using SWR.