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!



Read more about Tutorials

Cover Image for Building an AI Writer SaaS with Next.js and Supabase

Building an AI Writer SaaS with Next.js and Supabase

57 min read
Learn how to build an AI Writer SaaS with Next.js and Supabase - from writing SEO optimized blog posts to managing subscriptions and billing.
Cover Image for Announcing the Data Loader SDK for Supabase

Announcing the Data Loader SDK for Supabase

8 min read
We're excited to announce the Data Loader SDK for Supabase. It's a declarative, type-safe set of utilities to load data into your Supabase database that you can use in your Next.js or Remix apps.
Cover Image for Adding AI capabilities to your Next.js SaaS with Supabase and HuggingFace

Adding AI capabilities to your Next.js SaaS with Supabase and HuggingFace

20 min read
In this tutorial, we will learn how to use add AI capabilities to your SaaS using Supabase Vector, HuggingFace models and Next.js Server Components.
Cover Image for Building an AI-powered Blog with Next.js and WordPress

Building an AI-powered Blog with Next.js and WordPress

17 min read
Learn how to build a blog with Next.js 13 and WordPress and how to leverage AI to generate content.
Cover Image for Using Supabase Vault to store secrets

Using Supabase Vault to store secrets

6 min read
Supabase Vault is a Postgres extension that allows you to store secrets in your database. This is a great way to store API keys, tokens, and other sensitive information. In this tutorial, we'll use Supabase Vault to store our API keys
Cover Image for Introduction to Next.js Server Actions

Introduction to Next.js Server Actions

9 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.