Кэширование в Next.js — это не только экономия времени, но и сокращение избыточных сетевых запросов, поддержание актуальности данных и повышение производительности вашего приложения как рок-звезды.
Независимо от того, пытаетесь ли вы хранить данные в кэше дольше или обновлять их по требованию, Next.js предоставит вам все необходимые инструменты. В этой статье мы расскажем, как эффективно использовать кеширование в Next.js

Next.js расширяет API выборки, предоставляя вам супервозможности в области кэширования. С помощью простых параметров выборки, таких как cache: 'no-store' и cache: 'force-cache', вы можете легко контролировать, когда и как данные кэшируются.

Всегда свежий с кешем: «no-store» (эквивалент нестабильного_noStore())

Хотите каждый раз получать свежие данные? cache: лучше всего использовать 'no-store'. Эта опция выборки полностью пропускает кеш и получает самые последние данные при каждом запросе. Это идеальное решение, когда вам нужна точность в реальном времени — остатки вчерашней выборки не допускаются.

Примечание. Вы также можете использовать unstable_noStore(), если хотите пропустить кеш на серверном компоненте. Синтаксис может измениться позже, поэтому для стабильности используйте cache: 'no-store'.

Повторное использование данных с кешем: 'force-cache' (эквивалент нестабильного_кэша())

С другой стороны, если вас устраивает использование кешированных данных (например, статический контент, который не часто меняется), используйте cache: 'force-cache'. Он сохранит ответ для дальнейшего использования и пропустит избыточные сетевые запросы.

Примечание: unstable_cache() также кэширует данные, но использование стабильного cache: 'force-cache' более надежно, если вы избегаете неожиданностей в будущем.

]

Поддерживайте актуальность с помощью повторных проверок

Иногда кэшированные данные требуют обновления — через определенное время или по событию. К счастью для вас, Next.js позволяет выполнять повторную проверку кэшированных данных несколькими способами.

Повторная проверка со временем: next.revalidate

Если ваши данные необходимо периодически обновлять (например, каждый час или день), вы можете установить период повторной проверки, используя опцию next.revalidate в своем запросе на выборку. Он будет получать самые последние данные после указанного вами времени, сохраняя при этом все остальное время в кэше.

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

Повторная проверка по требованию с тегами: revalidateTag()

Теперь представьте, что вы можете указать Next.js обновлять определенные фрагменты кэшированных данных, когда происходит что-то важное — например, отправка формы или публикация новой публикации в блоге. Вы можете назначать теги своим кэшированным данным, а затем при необходимости повторно проверять эти теги.

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

Использование нестабильных методов

Если вы любите приключения, вы также можете использовать методы unstable_noStore() и unstable_cache() непосредственно на компонентах сервера для управления поведением кэширования. Просто имейте в виду, что они по какой-то причине «нестабильны», поэтому они могут измениться в будущем (или могли быть изменены в то время, когда вы это читаете).

Или, если вы увлекаетесь кешированием, вот как вы можете использовать нестабильный_cache():

Пропустить сверление винта

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

Подведем итоги

Next.js предоставляет вам все инструменты, необходимые для эффективного управления кешированием, будь то с помощью таких параметров API выборки, как cache: 'no-store' и cache: 'force-cache' или более экспериментальные методы нестабильный_noStore() и нестабильный_кэш(). Добавьте стратегии повторной проверки, такие как next.revalidate и revalidateTag, и вы получите все необходимое, чтобы поддерживать актуальность данных без особых усилий.

Источники:
Кэширование Next.js