How to boost Next.js app with API Caching

The 1st episode of the Cookbook app

Introduction

More often than not, we make requests to external service APIs to retrieve data for our applications. For instance, integrate openweathermap.org with a weather forecast application or build a dictionary application with WordAPI. These third-party APIs help a lot when we do not have enough time to build and manage the database.

However, the external API calls are expensive both in terms of response time and cost. A simple solution is to cache the external API requests.

Which API request to cache? And how does it work?

There are API requests in the application that are made frequently with the same parameters and return the same result. If these API requests and responses are cached, it helped to reduce the number of HTTP requests, improve the application performance and avoid hitting the quota limit.

For example, a page of an application displays a list of popular recipes that is retrieved from an external service API. When user A visits the page, the application will make an HTTP request to the external service to retrieve the list of recipes.