0Pricing
React Academy · Урок

fetch() с параметрами кэширования в Next.js

Используйте параметры force-cache, no-store и revalidate в fetch, чтобы управлять кэшированием.

«fetch() с параметрами кэширования в Next.js» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Расширенная загрузка данных в Next.js

Next.js расширяет встроенный API fetch() параметром next для управления кэшированием и повторной проверкой. Это работает только в серверных компонентах и обработчиках маршрутов.

Принудительное кэширование (по умолчанию)

По умолчанию fetch() в Next.js использует force-cache — кэширует ответ на неопределенный срок и повторно использует его для всех запросов, пока не будет явно выполнена повторная проверка.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

Без хранения — всегда актуальные данные

no-store полностью отключает кэширование. Каждый запрос обращается к источнику. Используйте этот режим для персонализированных или конфиденциальных данных.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — ISR по времени

Параметр next.revalidate кэширует ответ, но каждые N секунд в фоновом режиме выполняет его повторную проверку (модель устаревших данных с последующим обновлением).

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

revalidate на уровне сегмента

Экспортируйте константу revalidate из страницы или макета, чтобы применить интервал повторной проверки ко всем запросам данных в этом сегменте.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Повторная проверка по тегам

Назначайте теги вызову загрузки данных с помощью next.tags. Используйте revalidateTag(tag) в серверном действии или обработчике маршрута, чтобы по требованию сделать недействительными все кэши с этими тегами.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) делает недействительным кэш для определенного пути URL, из-за чего он будет создан заново при следующем запросе.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Отказ от кэширования динамическими функциями

Вызов cookies(), headers() или чтение searchParams на странице делает ее динамической — кэширование для этой страницы полностью отключается.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Устранение дубликатов запросов

Next.js устраняет дублирование одинаковых запросов данных в рамках одного прохода отображения: если два серверных компонента запрашивают один и тот же URL, выполняется только один HTTP-запрос.

Мемоизация запросов и кэш

Существует два уровня кэширования: мемоизация запросов (устранение дубликатов в рамках запроса, автоматически) и кэш данных (постоянный, управляется параметрами кэширования и повторной проверки).

Отладка поведения кэша

Запустите next build и проверьте результат сборки — для каждого маршрута указана стратегия отображения: статическая (кэшируется), динамическая (без кэша) или ISR (с интервалом повторной проверки).

Быстрая проверка

Какой вариант кэширования следует использовать для данных, которые редко меняются, но должны обновляться без полной повторной сборки и развертывания?

Итоги

Используйте cache: 'force-cache' для статических данных, cache: 'no-store' для всегда актуальных данных и next: { revalidate: N } для ISR. Помечайте запросы тегами с помощью next.tags и вызывайте revalidateTag() для обновления по требованию. Динамические функции автоматически исключают страницы из кэширования.

Часто задаваемые вопросы

Урок «fetch() с параметрами кэширования в Next.js» бесплатный?

Да — полный текст урока «fetch() с параметрами кэширования в Next.js» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «fetch() с параметрами кэширования в Next.js»?

Используйте параметры force-cache, no-store и revalidate в fetch, чтобы управлять кэшированием. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «fetch() с параметрами кэширования в Next.js»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. fetch() с параметрами кэширования в Next.js
  2. unstable_cache и React cache()
  3. Инкрементальная генерация статических страниц (ISR)
  4. Серверные действия для мутаций данных
← Назад к React Academy