Next.js 15 for fullstack-webapper · leksjon

Strategier for hurtigbufring på serversiden

Lær å hurtigbufre data på serveren ved hjelp av `fetch`-alternativer og revalidering for å forbedre ytelsen.

Leksjon 3 av 411 trinn

Strategier for hurtigbufring på serversiden er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 3 av 4. 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 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hvorfor hurtigbufring på serversiden?

I Next.js er hurtigbufring på serversiden avgjørende for å bygge raske og effektive webapplikasjoner. Det bidrar til å redusere lastetider og belastningen på serveren.

Ytelse: Leverer innhold raskere til brukerne.
Reduserte kostnader: Sjeldnere datahenting betyr færre API-kall, noe som kan spare penger.
Skalerbarhet: Håndterer flere brukere uten å overbelaste backend-systemet.

Vi skal se på hvordan Next.js utnytter det innebygde fetch-API-et for kraftig hurtigbufring.

Next.js `fetch` og standardinnstillinger for hurtigbufring

Når du bruker det innebygde fetch-API-et i Server Components i Next.js, hurtigbufres dataene automatisk som standard. Det er som å ha et innebygd datalager.

Som standard hurtigbufres fetch-forespørsler med strategien 'force-cache'. Det betyr at Next.js først ser etter et hurtigbufret svar og bruker det hvis det finnes. Nye data hentes bare hvis det ikke finnes noen oppføring i hurtigbufferet.

Deaktivere hurtigbufferet: `cache: 'no-store'`

Noen ganger må du sikre at dataene alltid er oppdaterte, for eksempel for dashbord i sanntid eller sensitiv brukerinformasjon. I slike tilfeller kan du deaktivere hurtigbufring for bestemte fetch-forespørsler.

cache: 'no-store' forteller Next.js at data alltid skal hentes på nytt fra opprinnelsesserveren, og at de aldri skal lagres i hurtigbufferet. Dette er nyttig for svært dynamisk innhold eller innhold som endres ofte.

`no-store` i praksis

Slik bruker du cache: 'no-store' i en Server Component for å sikre at du alltid får de nyeste brukerdataene.

async function getUserProfile(userId) {
  const res = await fetch(`https://api.example.com/users/${userId}`, {
    cache: 'no-store' // Always fetch fresh data
  });
  if (!res.ok) {
    throw new Error('Failed to fetch user profile');
  }
  return res.json();
}

export default async function ProfilePage({ params }) {
  const user = await getUserProfile(params.userId);
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

Tidsbasert revalidering

For data som endres med jevne mellomrom, men ikke hele tiden, kan du bruke tidsbasert revalidering. Denne strategien kalles også «stale-while-revalidate».

Du kan angi et revalidate-alternativ i fetch-egenskapen next. Det forteller Next.js hvor ofte (i sekunder) data skal hentes på nytt i bakgrunnen, mens hurtigbufrede data leveres i mellomtiden.

next: { revalidate: 60 }: Dataene hentes på nytt maksimalt hvert 60. sekund.

Eksempel på revalidate-alternativet

La oss si at du har et blogginnlegg som oppdateres med noen minutters mellomrom. Du kan bruke revalidate for å holde det oppdatert uten å kontakte API-et ved hver eneste forespørsel.

async function getBlogPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 } // Revalidate every hour
  });
  if (!res.ok) {
    throw new Error('Failed to fetch blog post');
  }
  return res.json();
}

export default async function BlogPostPage({ params }) {
  const post = await getBlogPost(params.slug);
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Revalidering ved behov

Hva om du vil oppdatere hurtigbufrede data umiddelbart etter en endring, for eksempel når en bruker publiserer et nytt innlegg? Det er her revalidering ved behov kommer inn.

Next.js tilbyr to funksjoner for dette:

revalidatePath('/path'): Ugyldiggjør hurtigbufferet for en bestemt sti.
revalidateTag('tag'): Ugyldiggjør hurtigbufferet for alle fetch-kall som er knyttet til en bestemt tagg.

Disse brukes vanligvis i Server Actions eller API Routes etter en endring av data.

Bruke `revalidateTag`

For å bruke revalidateTag må du først merke fetch-forespørslene dine med tagger. Deretter kan du utløse revalidering for den aktuelle taggen fra en Server Action eller API Route.

Dette gir detaljert kontroll over hurtigbufferet, slik at bare det som er nødvendig, tømmes når data faktisk endres.

async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { tags: ['products'] } // Tag this fetch request
  });
  if (!res.ok) {
    throw new Error('Failed to fetch products');
  }
  return res.json();
}

// In a Server Action or API Route after adding/updating a product:
// import { revalidateTag } from 'next/cache';
// revalidateTag('products'); // Invalidate all fetches tagged 'products'

export default async function ProductsPage() {
  const products = await getProducts();
  return (
    <div>
      <h1>Our Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

Velge riktig strategi

Valget av den beste hurtigbufferstrategien avhenger av hvor ofte dataene endres:

cache: 'no-store': For svært dynamiske data, sanntidsdata eller sensitive data som alltid må være oppdaterte.
next: { revalidate: N }: For data som oppdateres med jevne mellomrom (for eksempel nyhetsartikler og blogginnlegg), der det er greit at dataene kan være litt utdaterte.
revalidatePath / revalidateTag: For data som endres uforutsigbart, ofte på grunn av brukerhandlinger (for eksempel kommentarer eller varelager i netthandel), og som må oppdateres umiddelbart etter en mutasjon.

Kontroll av hurtigbufferstrategi

Du bygger en feed for sosiale medier der innlegg opprettes og oppdateres ofte. Du vil sikre at brukerne ser de nyeste innleggene uten for mange API-kall. Hvilken hurtigbufferstrategi egner seg best for å hente hovedfeeden?

Besvar den i den interaktive leksjonen

Oppsummering: Hurtigbufring på serversiden

Vi har sett på viktige strategier for caching på serversiden i Next.js ved hjelp av fetch-API-et:

Standard-caching: fetch bruker 'force-cache' som standard.
Deaktivere cache: Bruk cache: 'no-store' for data som alltid er oppdatert.
Tidsbasert revalidering: Bruk next: { revalidate: N } for stale-while-revalidate.
Revalidering ved behov: Bruk revalidatePath() eller revalidateTag() i Server Actions/API Routes for umiddelbare cache-oppdateringer.

Når De behersker disse teknikkene, kan De bygge svært raske og responsive Next.js-applikasjoner!

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: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Strategier for hurtigbufring på serversiden» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Strategier for hurtigbufring på serversiden», 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 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Strategier for hurtigbufring på serversiden»?

Lær å hurtigbufre data på serveren ved hjelp av `fetch`-alternativer og revalidering for å forbedre ytelsen. Du øver på Next.js 15 for fullstack-webapper 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 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper 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 3 av 4.

Hvor lang tid tar leksjonen «Strategier for hurtigbufring på serversiden»?

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 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-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

React Query for servertilstand
Klienttilstand med Zustand/Jotai
Strategier for hurtigbufring på serversiden
Optimistiske oppdateringer og ugyldiggjøring av hurtigbuffer

← Tilbake til Next.js 15 for fullstack-webapper