fetch

Next.js расширяет нативный Web fetch() API, позволяя каждому запросу на сервере устанавливать собственную семантику постоянного кэширования.

В браузере опция cache определяет, как fetch-запрос будет взаимодействовать с HTTP-кэшем браузера. С этим расширением cache определяет, как серверный fetch-запрос будет взаимодействовать с постоянным HTTP-кэшем фреймворка.

Вы можете вызывать fetch с async и await напрямую внутри серверных компонентов.

export default async function Page() {
  // Этот запрос должен кэшироваться до ручной инвалидации.
  // Аналогично `getStaticProps`.
  // `force-cache` используется по умолчанию и может быть опущен.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Этот запрос должен перезапрашиваться при каждом обращении.
  // Аналогично `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Этот запрос должен кэшироваться с временем жизни 10 секунд.
  // Аналогично `getStaticProps` с опцией `revalidate`.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

export default async function Page() {
  // Этот запрос должен кэшироваться до ручной инвалидации.
  // Аналогично `getStaticProps`.
  // `force-cache` используется по умолчанию и может быть опущен.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Этот запрос должен перезапрашиваться при каждом обращении.
  // Аналогично `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Этот запрос должен кэшироваться с временем жизни 10 секунд.
  // Аналогично `getStaticProps` с опцией `revalidate`.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

fetch(url, options)

Поскольку Next.js расширяет Web fetch() API, вы можете использовать любые доступные нативные опции.

options.cache

Настраивает взаимодействие запроса с кэшем данных (Data Cache) в Next.js.

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })

• force-cache (по умолчанию) - Next.js ищет совпадающий запрос в своём кэше данных.
  • Если найдено совпадение и оно актуально, данные возвращаются из кэша.
  • Если совпадения нет или оно устарело, Next.js запросит ресурс с удалённого сервера и обновит кэш.
• no-store - Next.js запрашивает ресурс с удалённого сервера при каждом обращении без проверки кэша и не обновляет кэш.

Важно знать:

• Если опция cache не указана, Next.js по умолчанию использует force-cache, если только не используются динамические функции типа cookies(), в этом случае используется no-store.
• Опция no-cache в Next.js работает так же, как no-store.

options.next.revalidate

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

Устанавливает время жизни ресурса в кэше (в секундах).

• false - Кэшировать ресурс бессрочно. Семантически эквивалентно revalidate: Infinity. HTTP-кэш может со временем удалять старые ресурсы.
• 0 - Запретить кэширование ресурса.
• number - (в секундах) Указывает максимальное время жизни ресурса в кэше — n секунд.

Важно знать:

• Если отдельный запрос fetch() устанавливает значение revalidate меньше, чем значение по умолчанию для маршрута, общий интервал ревалидации маршрута будет уменьшен.
• Если два fetch-запроса с одинаковым URL в одном маршруте имеют разные значения revalidate, будет использовано меньшее значение.
• Для удобства не обязательно указывать опцию cache, если задано значение revalidate, поскольку 0 подразумевает cache: 'no-store', а положительное значение — cache: 'force-cache'.
• Конфликтующие опции, такие как { revalidate: 0, cache: 'force-cache' } или { revalidate: 10, cache: 'no-store' }, вызовут ошибку.

options.next.tags

fetch(`https://...`, { next: { tags: ['collection'] } })

Устанавливает теги кэша для ресурса. Данные можно затем ревалидировать по требованию с помощью revalidateTag. Максимальная длина пользовательского тега — 256 символов.

История версий