TutorialsCaching 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
Tutorials

Cover Image for Creating a Waitlist with Firebase Auth

Creating a Waitlist with Firebase Auth

·3 min read
Implement a waitlist sign-up with Firebase Auth and allow sign-ins in batches to your SaaS
Cover Image for Using ElasticSearch with Next.js

Using ElasticSearch with Next.js

·8 min read
In this article, we share how to use ElasticSearch with Next.js to index your Firestore documents and make them searchable.
Cover Image for Using Firestore in Firebase Storage Rules

Using Firestore in Firebase Storage Rules

·3 min read
Firebase Storage now allows you to use Firestore queries to in your security rules. Here is all you need to know!
Cover Image for Turn your Next.js application into a PWA

Turn your Next.js application into a PWA

·4 min read
PWA can make your app look native, faster, updatable and offline-ready. In this post, we learn how to make a PWA with a Next.js application.
Cover Image for Email Link Authentication with Firebase and Next.js

Email Link Authentication with Firebase and Next.js

·4 min read
Learn how to add Email Link authentication to your SaaS application with Firebase Auth and Next.js
Cover Image for Walkthrough: Starting a Makerkit project with Firebase and Next.js

Walkthrough: Starting a Makerkit project with Firebase and Next.js

·9 min read
This walkthrough is a summary of the documentation to quickly bootstrapping a SaaS project with Makerkit