React Academy · Lekcja

unstable_cache i React cache()

Buforowanie wyników kosztownych funkcji dla pojedynczego żądania lub między żądaniami za pomocą narzędzi cache Next.js.

unstable_cache i React cache() to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Dwa narzędzia pamięci podręcznej

Next.js udostępnia dwa uzupełniające się narzędzia buforowania: unstable_cache do trwałego buforowania między żądaniami oraz funkcję Reacta cache() do usuwania duplikatów w ramach jednego żądania.

React cache() — usuwanie duplikatów w ramach żądania

cache(fn) z Reacta zapamiętuje wynik funkcji na czas trwania jednego przebiegu renderowania serwerowego. Dwa komponenty serwerowe wywołujące tę samą buforowaną funkcję otrzymują ten sam wynik bez drugiego wywołania bazy danych lub 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 — trwały cache

unstable_cache(fn, keyParts, options) zachowuje wynik między żądaniami aż do jawnej rewalidacji. Można o nim myśleć jak o fetch({ next: { revalidate } }), ale dla dowolnej funkcji asynchronicznej (zapytań do bazy danych, wywołań Redis itd.).

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();

Elementy klucza cache

Drugim argumentem funkcji unstable_cache jest tablica ciągów znaków tworzących klucz cache. Należy uwzględnić wszystkie zmienne wpływające na wynik.

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);

Tagi do rewalidacji na żądanie

Oznacz funkcje przechowywane w cache tagami i unieważniaj je za pomocą revalidateTag(), gdy dane się zmienią — na przykład po mutacji w Server Action.

// 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');
}

Rewalidacja oparta na czasie

Ustaw revalidate: N w opcjach, aby cache został poddany rewalidacji po N sekundach, podobnie jak ISR dla wywołań fetch.

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

Łączenie cache() i unstable_cache

Użyj cache() wewnątrz unstable_cache dla funkcji wywoływanych z wielu miejsc podczas jednego renderowania: deduplikacja w obrębie żądania i zachowanie wyniku między żądaniami.

// 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'] });

Ograniczenia unstable_cache

unstable_cache jest oznaczone jako niestabilne, ponieważ API może się zmienić przed ustabilizowaniem. Funkcje przechowywane w cache nie mogą uzyskiwać dostępu do danych zależnych od konkretnego żądania, takich jak cookies lub headers.

React cache() dla danych layoutu

Opakuj pobieranie danych na poziomie layoutu w cache(), aby zarówno layout, jak i każda zagnieżdżona strona wywołująca tę samą funkcję współdzieliły wynik podczas jednego renderowania.

// 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

Kiedy używać poszczególnych mechanizmów

cache(): deduplikacja identycznych wywołań podczas jednego renderowania (tego samego żądania). unstable_cache: zachowywanie wyników między wieloma żądaniami aż do rewalidacji. Podczas wywoływania zewnętrznych interfejsów HTTP używaj fetch z next.revalidate.

Szybki test

Jaka jest najważniejsza różnica między funkcjami cache() w React i unstable_cache w Next.js?

Podsumowanie

cache(fn) deduplikuje wywołania podczas jednego przebiegu renderowania — idealnie nadaje się do współdzielonych danych layoutu i strony. unstable_cache(fn, keys, { revalidate, tags }) zachowuje wyniki między żądaniami i umożliwia ich unieważnianie na podstawie czasu lub tagów — idealnie nadaje się do kosztownych zapytań do bazy danych.

Często zadawane pytania

Czy lekcja „unstable_cache i React cache()” jest bezpłatna?

Tak — pełny tekst „unstable_cache i React cache()” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „unstable_cache i React cache()”?

Buforowanie wyników kosztownych funkcji dla pojedynczego żądania lub między żądaniami za pomocą narzędzi cache Next.js. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „unstable_cache i React cache()”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do React Academy