DEV Community: Arseny

Использование Redis в качестве общего кэша ISR в Next.js приложениях

Arseny — Wed, 29 Nov 2023 10:29:53 +0000

Введение

Добро пожаловать в краткое руководство по интеграции Redis, надёжного и исключительно быстрого хранилища кэша, в Next.js приложения. Почему настройка кэширования важна? Согласно официальной документации Next.js, по умолчанию кэш хранится в оперативной памяти и на диске. Однако, в контейнеризированных средах, таких как Kubernetes, каждый "под" имеет свою копию кэша, что приводит к потенциально устаревшим данным на отдельный "подах" из-за отсутствия общего кэша. Настроив Redis и своё приложение, вы можете использовать общий кэш во всех "подах", повышая масштабируемость ваших Next.js приложений.

Инструкция

В этом руководстве будет представлен обзор того, как использовать Redis в качестве хранилища кэша ISR/Data для Next.js.

Чтобы обеспечить общий кэш, прежде всего у вас должны быть запущены несколько экземпляров вашего приложения. Это может быть Kubernetes, Docker Swarm, Red Hat Open Shift итд. Выбор инструмента для развертывания зависит от ваших потребностей или вкуса.

Во-вторых, убедитесь, что ваши экземпляры приложений используют одинаковый buildId.

В-третьих, настройте ваш Redis как и где хотите. Единственное требование - сделать его доступным для каждого экземпляра приложения.

И всё почти готово!

Конфигурация Next.js

Попробуйте шаблон с уже настроенным кэшом, чтобы проверить, как всё работает. Начните с создания нового приложения Next.js с предварительно настроенным Redis. Это создаст базовую структуру для вашего проекта с интеграцией с Redis. Выполните следующую команду, чтобы создать приложение:

npx create-next-app --example cache-handler-redis cache-handler-redis-app

Затем создайте клиент Redis с вашими учетными данными. Это включает в себя создание экземпляра клиента с данными подключения к серверу Redis. Замените переменные на hostname, port, password и db_number вашего сервера Redis:

const client = createClient({
  url: `redis://:${password}@${hostname}:${port}/${db_number}`,
});

Примечание: Если вы хотите использовать один Redis для нескольких разных приложений, используйте db_number или используйте buildId в качестве префикса ключа для разделения кэшей.

Используйте следующую команду, чтобы проверить, правильно ли настроен ваш кэш Redis и работает ли он. Эта команда выводит все ключи в вашей базе данных Redis, позволяя вам проверить, работает ли кэширование:

redis-cli KEYS *

Настройте ваш next.config.js чтобы он работал только в "production" среде, отключая его в среде разработки. Это гарантирует, что во время разработки всё будет работать без необходимости в подключении к Redis и включает обработчик кэша только в "production" среде:

const nextConfig = {
  experimental: {
    incrementalCacheHandlerPath:
      process.env.NODE_ENV === "production"
        ? require.resolve("./cache-handler-redis.js")
        : undefined, // отключаем Redis кэш в среде разработки
  },
};

Если все работает правильно, скопируйте файл cache-handler-redis.js в ваш проект рядом с вашим next.config.js. Наконец, установите необходимые зависимости в свой проект. Это @neshca/cache-handler и Redis. Выполните следующую команду, чтобы добавить их в ваш проект:

npm i -D @neshca/cache-handler redis

Заключение

Вы успешно узнали, как интегрировать Redis с Next.js, чтобы улучшить масштабируемость вашего приложения. Для получения дополнительной информации и продвинутых техник не забудьте ознакомиться с документацией @neshca/cache-handler.

Using Redis to Share ISR Cache in containerized self-hosted Next.js App

Arseny — Wed, 29 Nov 2023 09:50:24 +0000

Introduction

Welcome to this guide on integrating Redis, a reliable and exceptionally fast cache store, with Next.js. Why is configuring caching essential? As per Next.js's official documentation, default settings store cache in memory and on disk. However, in self-hosted containerized environments like Kubernetes, each pod has its copy of the cache, leading to potential stale data due to the lack of shared caching. By setting up Redis, you can ensure consistent, high-speed cache management across all pods, enhancing the scalability of your Next.js applications. Let's dive into how to achieve seamless integration.

The tutorial

This tutorial will overview how to use Redis as the ISR/Data cache store for Next.js.

To share a cache, you must have several instances of your app running in the first place. It may be a container orchestration setup such as Kubernetes, Docker Swarm, Red Hat Open Shift, etc. The setup itself doesn't really matter.

Second, ensure that your app instances share the same buildId.

Third, configure your Redis how and where you want. The only requirement is to make it reachable for every app instance.

And you are almost good to go!

Next.js configuration

Try the Next.js template with an already configured cache setup to test how things work. This template uses the @neshca/cache-handler library to replace the default Next.js cache seamlessly. Start by creating a new Next.js application with a pre-configured Redis setup. This sets up a basic structure for your project with Redis integration. Run the following command to create the app:

npx create-next-app --example cache-handler-redis cache-handler-redis-app

Next, initialize the Redis client with your credentials. This involves creating a client instance with the Redis server's connection details. Replace the placeholders with your Redis server's hostname, port, password, and database number:

const client = createClient({
  url: `redis://:${password}@${hostname}:${port}/${db_number}`,
});

Note: If you want to use one Redis store for multiple apps, use the db_number or use buildId as a key prefix to separate the caches.

Use the following command to verify that your Redis cache is set up correctly and functioning. It lists all keys in your Redis database, allowing you to check if the caching is operational:

redis-cli KEYS *

Configure your next.config.js to use Redis for caching in production while disabling it in development mode. This ensures that your development environment runs smoothly without the need for Redis and enables the cache handler only when in production:

const nextConfig = {
  experimental: {
    incrementalCacheHandlerPath:
      process.env.NODE_ENV === "production"
        ? require.resolve("./cache-handler-redis.js")
        : undefined, // disable cache handler in development
  },
};

If everything works fine, copy the cache-handler-redis.js file to your project near your next.config.js. Finally install the necessary dependencies for your caching setup. This includes the @neshca/cache-handler and Redis. Run the following command to add these to your project:

npm i -D @neshca/cache-handler redis

Conclusion

You've successfully learned how to integrate Redis with Next.js, enhancing your application's scalability. For further information and advanced techniques, remember to check out the @neshca/cache-handler documentation.