Кэширование

Data Cache (Кэш данных) - Кэширует результаты fetch() запросов на сервере.

1
2
3
4
5
6
7
8
9
// app/products/page.tsxexport default async function ProductsPage() {  // ✅ Этот запрос будет кэшироваться по умолчанию  const products = await fetch('https://api.example.com/products', {    cache: 'force-cache' // по умолчанию  }).then(r => r.json());    return <ProductList products={products} />;}

Стратегии кэширования fetch:

• fetch(url, { cache: 'force-cache' }) - Кэшировать навсегда (по умолчанию)
• fetch(url, { cache: 'no-store' }) - Не кэшировать (всегда свежие данные)
• fetch(url, { next: { revalidate: 60 } }) - Кэшировать с перевалидацией через 60 секунд
• fetch(url, { next: { tags: ['products', 'category-1'] } }) - Кэшировать с тегом (для ручной инвалидации)

Full Route Cache - Кэширует полностью сгенерированный HTML страницы.

1
2
3
4
5
6
7
// app/products/page.tsxexport const dynamic = 'force-static'; // ✅ Кэшируем HTML  export default async function ProductsPage() {  const products = await getProducts(); // Данные тоже кэшируются  return <ProductList products={products} />;}

✅ Плюсы:

• Максимальная скорость
• Минимальная нагрузка на сервер/БД
• Отлично для статичного контента

❌ Минусы:

• Данные не обновляются без пересборки
• Не подходит для частых обновлений

Router Cache - React-кэш на клиенте, хранит страницы при навигации.

1
2
3
4
5
6
7
8
// Это происходит автоматически при использовании <Link><Link href="/products">Товары</Link>// Next.js предзагружает и кэширует страницу /products на клиенте  // Настройка длительности кэша<Link href="/products" prefetch={true}>Товары</Link>// prefetch={true} (по умолчанию) - кэшировать// prefetch={false} - не кэшировать

Время жизни Router Cache:

• Static страницы: 5 минут
• Dynamic страницы: 30 секунд