Next.js 15 fullstack (App Router + Server Actions) · leksjon

Hurtigbufring og revalidering

Forstå Next.js' kraftige mekanismer for hurtigbufring, og hvordan du revaliderer hurtigbufrede data for å vise oppdatert innhold.

Leksjon 2 av 311 trinn

Hurtigbufring og revalidering er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 2 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.

Hvorfor hurtigbufring er viktig

Hurtigbufring er en grunnleggende teknikk for å forbedre ytelsen og responsiviteten til webapplikasjoner.

Se for Dem at De henter de samme dataene gjentatte ganger fra en database eller et API. Dette skaper unødvendig belastning og gjør applikasjonen tregere.

Hurtigbufring lagrer en kopi av data som brukes ofte, slik at de kan leveres raskere ved senere forespørsler. Dermed reduseres ventetid og ressursbruk.

Innebygd datalager

Next.js 15, særlig med App Router, har kraftige innebygde mekanismer for hurtigbufring.

Det hurtigbufrer intelligent data som hentes med det innebygde fetch-API-et i Server Components.
Dette hurtigbufferet lagres på serveren, noe som sikrer raskere svar for tilbakevendende besøkende eller flere forespørsler etter de samme dataene.
Det hjelper applikasjonen med å levere innhold raskt uten å hente dataene på nytt hele tiden.

Standardinnstillinger for `fetch` i Server Components

Når De bruker standard-API-et fetch i en Next.js Server Component, hurtigbufrer Next.js automatisk dataene.

Det betyr at hvis den samme fetch-forespørselen gjøres på nytt, leverer Next.js dataene fra hurtigbufferet i stedet for å kontakte det eksterne API-et.

Denne oppførselen er optimalisert for situasjoner der dataene ikke endres ofte, og kan gi en betydelig ytelsesforbedring.

Prøv standard hurtigbufring

Her er et enkelt eksempel på en Server Component som henter data. Legg merke til hvordan Next.js hurtigbufrer resultatet automatisk.

Hvis De kjører dette og oppdaterer siden, er det ikke sikkert at fetch-kallet kontakter det eksterne API-et på nytt med én gang, avhengig av hurtigbufferets levetid.

// app/page.js
async function getUserData() {
  // This fetch request is automatically cached by Next.js
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  if (!res.ok) {
    throw new Error('Failed to fetch user data');
  }
  return res.json();
}

export default async function HomePage() {
  const user = await getUserData();
  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      <p>Fetched at: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

Omgå hurtigbufferet

Noen ganger må De sørge for at dataene alltid er ferske og ikke leveres fra hurtigbufferet. Det kan for eksempel være ved visning av aksjekurser i sanntid eller brukerspesifikke data som endres ofte.

De kan deaktivere hurtigbufring for en bestemt fetch-forespørsel ved å sette alternativet cache til 'no-store'.

fetch('...', { cache: 'no-store' }) forteller Next.js at dataene alltid skal hentes på nytt.
Dette sikrer at De får den nyeste informasjonen hver gang.

Prøv å omgå hurtigbufferet

Dette eksempelet viser hvordan De eksplisitt kan omgå hurtigbufferet. Hver gang denne komponenten rendres, sendes en ny forespørsel til API-et.

// app/live-data/page.js
async function getLiveTime() {
  // This fetch request explicitly opts out of caching
  const res = await fetch('https://worldtimeapi.org/api/ip', {
    cache: 'no-store', // Always re-fetch
  });
  if (!res.ok) {
    throw new Error('Failed to fetch live time');
  }
  return res.json();
}

export default async function LiveDataPage() {
  const timeData = await getLiveTime();
  return (
    <div>
      <h1>Live Time</h1>
      <p>Current time in your timezone:</p>
      <p><b>{new Date(timeData.datetime).toLocaleTimeString()}</b></p>
      <p>Last fetched: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

Revalidere data over tid

Hva om De vil at data skal bufres, men oppdateres etter en viss tid? Next.js støtter tidsbasert revalidering, på samme måte som Incremental Static Regeneration (ISR).

De kan angi et revalidate-alternativ i next-egenskapen i fetch-kallet:

fetch('...', { next: { revalidate: 60 } }) bufrer dataene i 60 sekunder.
Etter 60 sekunder utløser den neste forespørselen en ny henting i bakgrunnen. Først vises utdaterte data, og deretter oppdaterte data.

Prøv tidsbasert revalidering

I dette eksempelet bufres dataene i 10 sekunder. Hvis De oppdaterer siden innen 10 sekunder, ser De det bufrede klokkeslettet. Etter 10 sekunder utføres en ny henting.

// app/revalidated-data/page.js
async function getRevalidatedData() {
  // Data will be revalidated every 10 seconds
  const res = await fetch('https://worldtimeapi.org/api/timezone/Etc/UTC', {
    next: { revalidate: 10 }, // Revalidate after 10 seconds
  });
  if (!res.ok) {
    throw new Error('Failed to fetch revalidated data');
  }
  return res.json();
}

export default async function RevalidatedPage() {
  const data = await getRevalidatedData();
  return (
    <div>
      <h1>Revalidated UTC Time</h1>
      <p>Current UTC Time: <b>{new Date(data.datetime).toLocaleTimeString()}</b></p>
      <p>This data revalidates every 10 seconds.</p>
      <p>Last rendered: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

Manuell revalidering

I tillegg til tidsbasert revalidering lar Next.js Dem revalidere bufrede data manuelt, eller «ved behov».

revalidatePath('/path'): Revaliderer bufferen for en bestemt sidesti.
revalidateTag('tag'): Revaliderer alle fetch-forespørsler som er merket med en bestemt streng (for eksempel fetch('...', { next: { tags: ['products'] } })).

Dette er nyttig når data endres som følge av en brukerhandling (for eksempel ved oppdatering av et produkt), og De vil sikre at brukergrensesnittet viser den nyeste informasjonen umiddelbart.

Test kunnskapene Deres

Hvilket av følgende Next.js-fetch-alternativer sikrer at data ALLTID hentes fra opprinnelsesserveren ved hver forespørsel, utenom eventuell hurtigbufring?

Besvar den i den interaktive leksjonen

Oppsummering av bufring og revalidering

I denne leksjonen har De lært om Next.js sine kraftige mekanismer for bufring av data.

Next.js bufrer fetch-forespørsler i Server Components som standard.
De kan omgå bufferen med { cache: 'no-store' } for sanntidsdata.
Tidsbasert revalidering (ISR) oppnås med { next: { revalidate: N } }.
Revalidering ved behov bruker revalidatePath eller revalidateTag til å oppdatere bufrede data manuelt.

Det er avgjørende å beherske disse teknikkene for å bygge Next.js-applikasjoner med høy ytelse!

Gratis å komme i gang

Lær deg TypeScript 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: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Hurtigbufring og revalidering» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Hurtigbufring og revalidering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.

Hva lærer jeg i «Hurtigbufring og revalidering»?

Forstå Next.js' kraftige mekanismer for hurtigbufring, og hvordan du revaliderer hurtigbufrede data for å vise oppdatert innhold. Du øver på Next.js 15 fullstack (App Router + Server Actions) 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 Next.js 15 fullstack (App Router + Server Actions)?

Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) 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 3.

Hvor lang tid tar leksjonen «Hurtigbufring og revalidering»?

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 Next.js 15 fullstack (App Router + Server Actions)-leksjonen?

Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-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

Datainnhenting på serversiden
Hurtigbufring og revalidering
Parallell, sekvensiell og strømmende datainnhenting

← Tilbake til Next.js 15 fullstack (App Router + Server Actions)