Caching a Next.js API with Redis

Find out how to cache a Next.js Serverless API with Redis

·5 min read
Cover Image for 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:

docker-compose.yml
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:

configuration.ts
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:

redis.ts
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
/pages/api/handler.ts
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!


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS

Read more about Tutorials

Cover Image for Introduction to Next.js Server Actions

Introduction to Next.js Server Actions

·6 min read
Next.js Server Actions are a new feature introduced in Next.js 13 that allows you to run server code without having to create an API endpoint. In this article, we'll learn how to use them.
Cover Image for Next.js 13: complete guide to Server Components and the App Directory

Next.js 13: complete guide to Server Components and the App Directory

·15 min read
Unlock the full potential of Next.js 13 with our most complete and definitive tutorial on using server components and the app directory.
Cover Image for Pagination with React.js and Supabase

Pagination with React.js and Supabase

·6 min read
Discover the best practices for paginating data using Supabase and React.js using the Supabase Postgres client
Cover Image for How to sell code with Lemon Squeezy and Github

How to sell code with Lemon Squeezy and Github

·7 min read
Sell and monetize your code by giving private access to your Github repositories using Lemon Squeezy
Cover Image for Writing clean React

Writing clean React

·9 min read
Level up your React coding skills with Typescript using our comprehensive guide on writing clean code. Start writing clean React code, today.
Cover Image for How to use MeiliSearch with React

How to use MeiliSearch with React

·12 min read
Learn how to use MeiliSearch in your React application with this guide. We will use Meiliseach to add a search engine for our blog posts