Caching a Next.js API with Redis

Redis is the world's most used in-memory cache, needed by many services for scaling high-traffic websites thanks to its speed.

Redis can be used in many ways, such as:

• for saving payloads from expensive computations
• for preventing the API servers from being over-loaded
• for storing low-ttl values
• for sharing temporary data
• for security reasons, such as limiting requests by IP
• ... and more!

Due to the reasons above, Redis is an extremely important part of a serverless stack like Next.js. In fact, because serverless APIs do not store data in between executions (or, better, we have no guarantee of it happening), having to cache, save and share values using Redis is a very common practice.

In this article, we learn how to initialize Redis and use it in a Next.js API with some of the most common caching use-cases.

Installing Redis

The easiest way to install Redis is using a Docker Image. If you have installed Docker, you can run Redis using the following docker-compose.yml file:

version: '2.2'
services:
 redis:
   image: redislabs/redis
   container_name: redis
   ports:
     - 6379:6379
   volumes:
     - data01:/usr/share/redis/data
volumes:
 data01:
   driver: local

For more information about the Docker image, check out the "redislabs/redis" image.

Assuming you're using VS Code or a JetBrains IDE, they both include plugins to work with Docker without having to type any terminal command.

Initializing Redis in a Next.js Application

Once the Redis service is running in your system, it's time to it to the Next.js application.

Installing ioredis - A Redis client for Next.js

First, let's install ioredis, the most famous Redis client for Node.js:

npm i ioredis --save

Adding the Redis server configuration

While not needed during development because the Redis client will automatically use the development options, we should still learn how to configure Redis which is served on a remote server (or on a third-party provider, such as RedisLabs or UpStash).

In a Next.js application, you would normally add your environment variables to a .env file, such as the below:

REDIS_HOST=***
REDIS_PASSWORD=***
REDIS_PORT=***

Then, we can add it to a configuration.ts file which hosts the configuration for the whole application, adding an object named redis:

redis: {
   host: process.env.REDIS_HOST,
   password: process.env.REDIS_PASSWORD,
   port: process.env.REDIS_PORT,
 },

Remember: it's totally OK leaving these values undefined during development, as they will hit the local Redis server if left blank. With that said, ensure you add them to your production CI or Vercel console.

Initializing the Redis client

With Redis installed, it's time to create a function to initialize Redis, which we export as createRedisInstance:

import Redis, { RedisOptions } from 'ioredis';
import configuration from '~/configuration';
function getRedisConfiguration(): {
 port: Maybe<number>;
 host: Maybe<string>;
 password: Maybe<string>;
} {
 return configuration.redis;
}
export function createRedisInstance(
 config = getRedisConfiguration()
) {
 try {
   const options: RedisOptions = {
     host: config.host,
     lazyConnect: true,
     showFriendlyErrorStack: true,
     enableAutoPipelining: true,
     maxRetriesPerRequest: 0,
     retryStrategy: (times: number) => {
       if (times > 3) {
         throw new Error(`[Redis] Could not connect after ${times} attempts`);
       }
       return Math.min(times * 200, 1000);
     },
   };
   if (config.port) {
     options.port = config.port;
   }
   if (config.password) {
     options.password = config.password;
   }
   const redis = new Redis(options);
   redis.on('error', (error: unknown) => {
     console.warn('[Redis] Error connecting', error);
   });
   return redis;
 } catch (e) {
   throw new Error(`[Redis] Could not create a Redis instance`);
 }
}

Using the Redis client

We won't go into detail about what you can do with the Redis client, but we can introduce two simple yet very popular commands: get and set. With these commands we can set a value and then retrieve it using the same key:

const redis = createRedisInstance();
const key = getRandomKey();
// storing data
await redis.set(key, data);
// getting data (using the same key as above)
const value = await redis.get(data);
// we can also increment a value by <N>
await redis.incrby(key, 1);

Using Redis in a Next.js API endpoint

Now that we're ready to use our Redis client, we can import it into any of our API endpoints.

For example, assuming we want to cache a request to our database for 1 hour, we can do something similar to the below.

1. We initialize Redis
2. We create a key using the request's body: the goal is to get a string retrieved from the parameters of the request so that we can retrieve requests that will have the same payload
3. We try getting a cached value: if it's there we return it to the client
4. If not, we fetch the data from the database
5. We cache the value using the key and the fresh data
6. We return the data to the client

export default function myApiHandler(
 req: NextApiRequest,
 res: NextApiResponse,
) {
 // get redis instance
 const redis = getRedisInstance();
 // build a key (it does not matter how)
 const key = buildKey(req.body);
 // try fetch cached data
 const cached = await redis.get(key);
 // if cached, we're good!
 if (cached) {
   return res.send(cached);
 }
 // fetch fresh data from the DB
 const data = await getData();
 
 // cache data setting an expiry of 1 hour
 // this means that the cached data will remain alive for 60 minutes
 // after that, we'll get fresh data from the DB
 const MAX_AGE = 60_000 * 60; // 1 hour
 const EXPIRY_MS = `PX`; // milliseconds
 // cache data
 await redis.set(key, JSON.stringify(data), EXPIRY_MS, MAX_AGE);
 // return data to client
 res.send(data);
}

If you're wondering why not simply store the data in memory, remember that with a serverless API that is not possible! This is why Redis can be so important for a serverless technology such as Next.js.

I hope you learned something new today. If you have any questions, please do contact me!