React Academy · leksjon

unstable_cache og React cache()

Bufre resultater fra kostbare funksjoner per forespørsel eller på tvers av forespørsler med Next.js-verktøy for caching.

Leksjon 2 av 412 trinn

unstable_cache og React cache() er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

To cache-verktøy

Next.js tilbyr to utfyllende cache-verktøy: unstable_cache for vedvarende caching på tvers av forespørsler, og Reacts cache() for deduplisering per forespørsel.

React cache() — Deduplisering per forespørsel

cache(fn) fra React husker resultatet av en funksjon så lenge én gjengivelsesrunde på serveren varer. To serverkomponenter som kaller den samme cachede funksjonen, får det samme resultatet uten et nytt DB-/API-kall.

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 — Vedvarende cache

unstable_cache(fn, keyParts, options) bevarer resultatet mellom forespørsler til det eksplisitt revalideres. Se på det som fetch({ next: { revalidate } }), men for enhver async-funksjon (DB-spørringer, Redis-kall og så videre).

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

Deler av cache-nøkkelen

Det andre argumentet til unstable_cache er en tabell med strenger som utgjør cache-nøkkelen. Ta med alle variabler som påvirker resultatet.

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

Tagger for revalidering ved behov

Merk cachelagrede funksjoner med tagger, og ugyldiggjør dem med revalidateTag() når data endres – for eksempel etter en mutasjon i en 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');
}

Tidsbasert revalidering

Angi revalidate: N i options for å revalidere cachen etter N sekunder, på samme måte som ISR for fetch-kall.

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

Kombinere cache() og unstable_cache

Bruk cache() inne i unstable_cache for funksjoner som kalles fra flere steder i én gjengivelse: deduplisering i forespørselen og bevaring mellom forespørsler.

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

Begrensninger ved unstable_cache

unstable_cache er merket som ustabil fordi API-et kan endres før det blir stabilt. Cachelagrede funksjoner kan ikke få tilgang til forespørselsspesifikke data som cookies eller headere.

React cache() for layoutdata

Pakk inn datahentinger på layoutnivå med cache(), slik at både layouten og eventuelle nestede sider som kaller den samme funksjonen, deler resultatet i én gjengivelse.

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

Når bør hver av dem brukes

cache(): dedupliserer identiske kall i en gjengivelse (samme forespørsel). unstable_cache: bevarer resultater mellom flere forespørsler til de revalideres. Bruk fetch + next.revalidate når du kaller eksterne HTTP-API-er.

Hurtigsjekk

Hva er den viktigste forskjellen mellom Reacts cache() og Next.js' unstable_cache?

Besvar den i den interaktive leksjonen

Oppsummering

cache(fn) dedupliserer kall gjennom én gjengivelse – ideelt for delte layout- og sidedata. unstable_cache(fn, keys, { revalidate, tags }) bevarer resultater mellom forespørsler med tidsbasert eller taggbasert ugyldiggjøring – ideelt for kostbare DB-spørringer.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «unstable_cache og React cache()» gratis?

Ja – hele teksten i «unstable_cache og React cache()» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «unstable_cache og React cache()»?

Bufre resultater fra kostbare funksjoner per forespørsel eller på tvers av forespørsler med Next.js-verktøy for caching. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «unstable_cache og React cache()»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

fetch() med cache-alternativer i Next.js
unstable_cache og React cache()
Inkrementell statisk regenerering (ISR)
Server Actions for dataendringer

← Tilbake til React Academy