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:

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!


Stay informed with our latest resources for building a SaaS

Subscribe to our newsletter to receive updatesor

Read more about

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
Learn how to write clean React code using Typescript with this guide.
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
Cover Image for Setting environment variables in Remix

Setting environment variables in Remix

·3 min read
Learn how to set environment variables in Remix and how to ensure that they are available in the client-side code.
Cover Image for Programmatic Authentication with Supabase and Cypress

Programmatic Authentication with Supabase and Cypress

·3 min read
Testing code that requires users to be signed in can be tricky. In this post, we show you how to sign in programmatically with Supabase Authentication to improve the speed of your Cypress tests and increase their reliability.
Cover Image for Reset the Supabase Database in Cypress

Reset the Supabase Database in Cypress

·4 min read
Resetting your database during E2E tests is important to prevent flakiness. In this tutorial, we'll show you how to reset the Supabase database in Cypress E2E tests.