React Academy · Oppitunti

unstable_cache ja React cache()

Välimuistittakaa raskaiden funktioiden tulokset pyyntökohtaisesti tai pyyntöjen välillä Next.js:n cache-apuohjelmilla.

Oppitunti 2/412 vaihetta

unstable_cache ja React cache() on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Kaksi välimuistityökalua

Next.js tarjoaa kaksi toisiaan täydentävää välimuistityökalua: unstable_cache pysyvään pyyntöjen väliseen välimuistitukseen ja Reactin cache() pyyntökohtaiseen deduplikointiin.

React cache() — Pyyntökohtainen deduplikointi

Reactin cache(fn) memoittaa funktion tuloksen yhden palvelinrenderöinnin ajaksi. Kun kaksi palvelinkomponenttia kutsuu samaa välimuistitettua funktiota, ne saavat saman tuloksen ilman toista tietokanta- tai API-kutsua.

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 — Pysyvä välimuisti

unstable_cache(fn, keyParts, options) säilyttää tuloksen pyyntöjen välillä, kunnes se uudelleenvalidoidaan nimenomaisesti. Ajattele sitä funktiona fetch({ next: { revalidate } }), mutta mille tahansa async-funktiolle, kuten tietokantakyselyille tai Redis-kutsuille.

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

Välimuistiavaimen osat

unstable_cache-funktion toinen argumentti on merkkijonoista koostuva taulukko, joka muodostaa välimuistiavaimen. Sisällytä siihen kaikki tulokseen vaikuttavat muuttujat.

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

Tunnisteet pyynnöstä tehtävää uudelleenvalidointia varten

Merkitse välimuistissa olevat funktiot tunnisteilla ja mitätöi ne revalidateTag()-funktiolla tietojen muuttuessa, esimerkiksi Server Action -mutaation jälkeen.

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

Aikaperusteinen uudelleenvalidointi

Aseta asetuksiin revalidate: N, jotta välimuisti uudelleenvalidoidaan N sekunnin kuluttua samalla tavalla kuin fetch-kutsujen ISR:ssä.

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

cache() ja unstable_cache yhdessä

Käytä cache()-funktiota unstable_cache-funktion sisällä, jos funktiota kutsutaan useasta paikasta yhden renderöinnin aikana: kutsujen deduplikointi pyynnön sisällä ja tuloksen säilyttäminen pyyntöjen välillä.

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

unstable_cache on merkitty epävakaaksi, koska sen ohjelmointirajapinta voi muuttua ennen vakauttamista. Välimuistissa olevat funktiot eivät voi käyttää pyyntökohtaisia tietoja, kuten evästeitä tai otsakkeita.

React cache() layout-tiedoille

Ympäröi layout-tietojen haut cache()-funktiolla, jotta sekä layout että samaa funktiota kutsuva sisäkkäinen sivu jakavat tuloksen yhden renderöinnin aikana.

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

Milloin kumpaakin käytetään

cache(): deduplikoi samanlaiset kutsut yhden renderöinnin aikana eli saman pyynnön sisällä. unstable_cache: säilyttää tulokset useiden pyyntöjen välillä, kunnes ne uudelleenvalidoidaan. Käytä fetch-funktiota ja next.revalidate-asetusta ulkoisia HTTP-ohjelmointirajapintoja kutsuttaessa.

Pikatarkistus

Mikä on Reactin cache()-funktion ja Next.js:n unstable_cache-funktion keskeinen ero?

Vastaa interaktiivisessa oppitunnissa

Kertaus

cache(fn) deduplikoi kutsut yhden renderöintikierroksen aikana, joten se sopii jaettuihin layout- ja sivutietoihin. unstable_cache(fn, keys, { revalidate, tags }) säilyttää tulokset pyyntöjen välillä ja mahdollistaa aika- tai tunnistepohjaisen mitätöinnin, joten se sopii kalliisiin tietokantakyselyihin.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”unstable_cache ja React cache()” ilmainen?

Kyllä – oppitunnin ”unstable_cache ja React cache()” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”unstable_cache ja React cache()”?

Välimuistittakaa raskaiden funktioiden tulokset pyyntökohtaisesti tai pyyntöjen välillä Next.js:n cache-apuohjelmilla. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”unstable_cache ja React cache()”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

fetch() välimuistiasetuksilla Next.js:ssä
unstable_cache ja React cache()
Inkrementaalinen staattinen regenerointi (ISR)
Server Actions datan muokkaukseen

← Takaisin: React Academy