React Academy · Урок

unstable_cache и React cache()

Кэшируйте результаты затратных функций для каждого запроса или между запросами с помощью утилит кэширования Next.js.

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

Две утилиты кэширования

Next.js предоставляет две взаимодополняющие утилиты кэширования: unstable_cache для постоянного кэширования между запросами и React cache() для устранения дубликатов в рамках одного запроса.

Кэш React — устранение дубликатов в рамках запроса

cache(fn) из React запоминает результат функции на время одного прохода серверного отображения. Два серверных компонента, вызывающие одну и ту же кэшированную функцию, получают одинаковый результат без повторного обращения к базе данных или API.

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — постоянный кэш

unstable_cache(fn, keyParts, options) сохраняет результат между запросами до явного обновления. Воспринимайте это как fetch({ next: { revalidate } }), но для любой асинхронной функции (запросов к базе данных, вызовов Redis и т. д.).

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

Части ключа кэша

Второй аргумент unstable_cache — это массив строк, образующих ключ кэша. Включите все переменные, влияющие на результат.

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

Теги для обновления по запросу

Помечайте кэшируемые функции тегами и сбрасывайте их с помощью revalidateTag() при изменении данных — например, после изменения данных в серверном действии.

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

Обновление по времени

Укажите revalidate: N в параметрах, чтобы обновлять кэш через N секунд, как ISR для вызовов fetch.

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

Сочетание cache() и unstable_cache

Используйте cache() внутри unstable_cache для функций, вызываемых из нескольких мест во время одного рендера: устранение дубликатов в рамках запроса + сохранение между запросами.

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

Ограничения unstable_cache

unstable_cache помечен как нестабильный, поскольку API может измениться до стабилизации. Кэшированные функции не могут обращаться к данным, специфичным для запроса, например к файлам cookie или заголовкам.

React cache() для данных макета

Оборачивайте получение данных уровня макета в cache(), чтобы макет и любая вложенная страница, вызывающая ту же функцию, использовали один результат в рамках одного рендера.

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

Когда что использовать

cache(): устраняет дублирование одинаковых вызовов в рамках одного рендера (одного запроса). unstable_cache: сохраняет результаты между несколькими запросами до повторной валидации. Используйте fetch и next.revalidate при обращении к внешним HTTP API.

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

В чём ключевое различие между cache() в React и unstable_cache в Next.js?

Повторение

cache(fn) устраняет дублирование вызовов в рамках одного прохода рендера — это удобно для общих данных макета и страницы. unstable_cache(fn, keys, { revalidate, tags }) сохраняет результаты между запросами и поддерживает обновление по времени или тегам — это удобно для ресурсоёмких запросов к базе данных.

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

Урок «unstable_cache и React cache()» бесплатный?

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

Чему я научусь в уроке «unstable_cache и React cache()»?

Кэшируйте результаты затратных функций для каждого запроса или между запросами с помощью утилит кэширования Next.js. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «unstable_cache и React cache()»?

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

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

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

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

← Назад к React Academy