Использование Redis в качестве общего кэша ISR в Next.js приложениях
Tags: webdev, tutorial, nextjs, devops
Published: 2023-11-29 10:29:53

## Введение

Добро пожаловать в краткое руководство по интеграции Redis, надёжного и исключительно быстрого хранилища кэша, в Next.js приложения. Почему настройка кэширования важна? Согласно [официальной документации](https://nextjs.org/docs/app/building-your-application/deploying#configuring-caching) Next.js, по умолчанию кэш хранится в оперативной памяти и на диске. Однако, в контейнеризированных средах, таких как Kubernetes, каждый "под" имеет свою копию кэша, что приводит к потенциально устаревшим данным на отдельный "подах" из-за отсутствия общего кэша. Настроив Redis и своё приложение, вы можете использовать общий кэш во всех "подах", повышая масштабируемость ваших Next.js приложений.

## Инструкция

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

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

Во-вторых, убедитесь, что ваши экземпляры приложений используют одинаковый [`buildId`](https://nextjs.org/docs/app/building-your-application/deploying#build-cache).

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

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

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

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

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

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

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

**Примечание**: _Если вы хотите использовать один Redis для нескольких разных приложений, используйте `db_number` или используйте [`buildId` в качестве префикса ключа](https://github.com/caching-tools/next-shared-cache/discussions/158) для разделения кэшей._

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

```sh
redis-cli KEYS *
```

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

```js
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. Выполните следующую команду, чтобы добавить их в ваш проект:

```sh
npm i -D @neshca/cache-handler redis
```

## Заключение

Вы успешно узнали, как интегрировать Redis с Next.js, чтобы улучшить масштабируемость вашего приложения. Для получения дополнительной информации и продвинутых техник не забудьте ознакомиться с [документацией](https://caching-tools.github.io/next-shared-cache) `@neshca/cache-handler`.