fetch

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

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

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

export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

fetch(url, options)

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

options.cache

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

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

• auto no cache (по умолчанию): Next.js получает ресурс с удаленного сервера при каждом запросе в режиме разработки, но получает его один раз во время next build, так как маршрут будет статически предварительно отрендерен. Если на маршруте обнаружены Динамические API, Next.js будет получать ресурс при каждом запросе.
• no-store: Next.js получает ресурс с удаленного сервера при каждом запросе, даже если на маршруте не обнаружены Динамические API.
• force-cache: Next.js ищет соответствующий запрос в своем Кэше данных.
  • Если есть совпадение и оно актуально, ресурс будет возвращен из кэша.
  • Если совпадения нет или оно устарело, 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 установлено в числовое значение.
• Конфликтующие опции, такие как { revalidate: 3600, cache: 'no-store' }, вызовут ошибку.

options.next.tags

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

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

Устранение проблем

Fetch с настройками по умолчанию auto no store и cache: 'no-store' не показывает свежие данные в режиме разработки

Next.js кэширует ответы fetch в Серверных компонентах при Hot Module Replacement (HMR) в локальной разработке для более быстрых ответов и снижения затрат на платные API-вызовы.

По умолчанию HMR-кэш применяется ко всем fetch-запросам, включая те, у которых установлены опции по умолчанию auto no cache и cache: 'no-store'. Это означает, что некэшированные запросы не будут показывать свежие данные между обновлениями HMR. Однако кэш очищается при навигации или полной перезагрузке страницы.

Подробнее см. в документации serverComponentsHmrCache.

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