React Academy · Oppitunti

fetch() välimuistiasetuksilla Next.js:ssä

Käyttäkää fetchissä force-cache-, no-store- ja revalidate-asetuksia välimuistitoiminnan hallintaan.

Oppitunti 1/413 vaihetta

fetch() välimuistiasetuksilla Next.js:ssä on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Laajennettu fetch Next.js:ssä

Next.js laajentaa natiivia fetch()-rajapintaa next-asetuksella, jolla hallitaan välimuistitusta ja uudelleenvalidointia. Tämä toimii vain palvelinkomponenteissa ja reittikäsittelijöissä.

force-cache (oletus)

Oletusarvoisesti Next.js:n fetch() käyttää force-cache-asetusta — se tallentaa vastauksen välimuistiin määrittelemättömäksi ajaksi ja käyttää sitä uudelleen kaikissa pyynnöissä, kunnes vastaus uudelleenvalidoidaan erikseen.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — Aina ajantasainen

no-store poistaa välimuistituksen kokonaan käytöstä. Jokainen pyyntö lähetetään alkuperäispalvelimelle. Käyttäkää tätä yksilöityihin tai arkaluonteisiin tietoihin.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — Aikaperusteinen ISR

next.revalidate-asetus tallentaa vastauksen välimuistiin, mutta uudelleenvalidoi sen taustalla N sekunnin välein vanhentunut-kunnes-uudelleenvalidoitu-mallin mukaisesti.

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

Segmenttikohtainen revalidate

Viekää revalidate-vakio sivulta tai layoutista, jotta uudelleenvalidointiväli koskee kaikkia kyseisen segmentin fetch-kutsuja.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Tunnisteisiin perustuva uudelleenvalidointi

Liittäkää fetch-kutsuun tunnisteita next.tags-asetuksella. Kutsukaa revalidateTag(tag)-funktiota Server Actionissa tai reittikäsittelijässä, jotta kaikki tunnisteen sisältävät välimuistit voidaan mitätöidä tarpeen mukaan.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) mitätöi tietyn URL-polun välimuistin, jolloin se luodaan uudelleen seuraavan pyynnön yhteydessä.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Dynaamiset funktiot poistavat välimuistin käytöstä

cookies()- tai headers()-funktion kutsuminen tai searchParams-arvon lukeminen sivulla tekee siitä dynaamisen — sivun välimuistitus poistuu kokonaan käytöstä.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Deduplikointi

Next.js deduplikoi samanlaiset fetch-kutsut yhden renderöintikierroksen aikana — jos kaksi palvelinkomponenttia hakee saman URL-osoitteen, HTTP-pyyntöjä tehdään vain yksi.

Pyyntöjen memoizointi vs. välimuisti

Välimuistitasoja on kaksi: pyyntöjen memoizointi (pyyntökohtainen automaattinen deduplikointi) ja datavälimuisti (pysyvä välimuisti, jota hallitaan cache- ja revalidate-asetuksilla).

Välimuistin toiminnan vianmääritys

Suorittakaa next build ja tarkistakaa koontituloste — jokaisessa reitissä näkyy sen renderöintistrategia: Static (välimuistissa), Dynamic (ei välimuistia) tai ISR (uudelleenvalidointiväli).

Pikatarkistus

Mitä fetch-välimuistiasetusta kannattaa käyttää tietoihin, jotka muuttuvat harvoin mutta joiden pitäisi päivittyä ilman koko sovelluksen uudelleenkoontia?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Käyttäkää cache: 'force-cache'-asetusta staattisille tiedoille, cache: 'no-store'-asetusta aina ajantasaisille tiedoille ja next: { revalidate: N }-asetusta ISR:ää varten. Merkitkää fetch-kutsut tunnisteilla next.tags ja kutsukaa revalidateTag()-funktiota tarpeen mukaan tapahtuvaa mitätöintiä varten. Dynaamiset funktiot poistavat sivut automaattisesti välimuistista.

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 ”fetch() välimuistiasetuksilla Next.js:ssä” ilmainen?

Kyllä – oppitunnin ”fetch() välimuistiasetuksilla Next.js:ssä” 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 ”fetch() välimuistiasetuksilla Next.js:ssä”?

Käyttäkää fetchissä force-cache-, no-store- ja revalidate-asetuksia välimuistitoiminnan hallintaan. 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 1/4.

Kuinka kauan ”fetch() välimuistiasetuksilla Next.js:ssä”-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