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

Введение

Добро пожаловать в краткое руководство по интеграции 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.