fetch

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

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

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

export default async function Page() {
  // This request should be cached until manually invalidated.
  // Similar to `getStaticProps`.
  // `force-cache` is the default and can be omitted.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
 
  // This request should be refetched on every request.
  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
 
  // This request should be cached with a lifetime of 10 seconds.
  // Similar to `getStaticProps` with the `revalidate` option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })
 
  return <div>...</div>
}

fetch(url, options)

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

options.cache

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

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 ведет себя так же, как no-store в Next.js.

options.next.revalidate

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

Установите срок хранения кэша ресурса (в секундах).

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

Важно знать:

• Если отдельный запрос fetch() установит значение revalidate ниже значения по умолчанию 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 символов, а максимальное количество меток — 64.

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