Next.js 15 for fullstack-webapper · leksjon

Avanserte mønstre for datainnhenting

Implementer effektiv datainnhenting med `async/await` direkte i Server Components, og utforsk strategier for revalidering.

Leksjon 3 av 411 trinn

Avanserte mønstre for datainnhenting 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.

Effektiv datahenting

I Next.js er effektiv datahenting avgjørende for å bygge raske og responsive applikasjoner. Vi har sett på grunnleggende datahenting, men hva med avanserte strategier?

Denne leksjonen utforsker hvordan De kan finjustere datahentingen i serverkomponenter for å styre hurtigbufring og sikre oppdaterte data, noe som gir bedre ytelse og brukeropplevelse.

Direkte henting fra serveren

App Router i Next.js 15 gjør det mulig å bruke async/await direkte i serverkomponenter. Det betyr at De kan hente data akkurat der brukergrensesnittet gjengis, uten å trenge hooks på klientsiden eller API-ruter.

Her er et enkelt eksempel på hvordan De kan hente et todo-element:

// app/page.tsx

export default async function HomePage() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const todo = await response.json();

  return (
    <div>
      <h1>Todo Item:</h1>
      <p><b>Title:</b> {todo.title}</p>
      <p><b>Completed:</b> {todo.completed ? 'Yes' : 'No'}</p>
    </div>
  );
}

Automatisk hurtigbufring

Som standard hurtigbufrer Next.js automatisk fetch-forespørsler som gjøres i serverkomponenter. Dette er en kraftig optimalisering!

Standardoppførselen tilsvarer bruk av { cache: 'force-cache' }.
Det egner seg godt for data som ikke endres ofte, for eksempel blogginnlegg eller produktdetaljer.
Når dataene først er hentet, vil påfølgende forespørsler til den samme URL-en innenfor et bestemt tidsrom bruke de hurtigbufrede dataene, noe som gir raskere sidelasting.

Alltid oppdaterte data

Noen ganger trenger De de aller nyeste dataene ved hver forespørsel, uten å bruke hurtigbufferen. Da er cache: 'no-store' nyttig.

Bruk dette for svært dynamisk innhold, brukerspesifikke data eller sanntidsstrømmer der selv noen få sekunder med utdaterte data er uakseptabelt.

// app/live-data/page.tsx

export default async function LiveDataPage() {
  // Fetch data that should never be cached
  const response = await fetch(
    'https://api.example.com/live-feed',
    { cache: 'no-store' } // Always fetch fresh data
  );
  const data = await response.json();

  return (
    <div>
      <h1>Live Feed:</h1>
      <p>{data.latestUpdate}</p>
      <p>Fetched: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

Planlagte dataoppdateringer

Hva om De trenger oppdaterte data, men ikke ved hver eneste forespørsel? De kan be Next.js om å validere dataene på nytt (hente dem på nytt) etter en bestemt tidsperiode ved hjelp av next: { revalidate: seconds }.

Dette passer perfekt for innhold som oppdateres med jevne mellomrom, for eksempel nyhetsartikler eller aksjekurser, fordi det balanserer aktualitet og ytelse.

// app/news/page.tsx

export default async function NewsPage() {
  const response = await fetch(
    'https://api.example.com/latest-news',
    { next: { revalidate: 60 } } // Revalidate every 60 seconds
  );
  const news = await response.json();

  return (
    <div>
      <h1>Latest News:</h1>
      <ul>
        {news.articles.slice(0, 3).map(article => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

Validering på nytt etter bane

I tillegg til tidsbasert validering tilbyr Next.js også behovsbasert validering på nytt. Det betyr at De programmatisk kan be Next.js om å hente data på nytt for en bestemt side eller bane.

Funksjonen revalidatePath('/your-path') kalles vanligvis fra en serverhandling eller en API-rute. Etter en dataendring (for eksempel når en bruker oppdaterer profilen sin) kan De ugyldiggjøre hurtigbufferen for brukerens profilsiden, slik at vedkommende umiddelbart ser de nyeste dataene.

Validering på nytt etter tagg

En mer fleksibel tilnærming til behovsbasert validering på nytt er å bruke tagger. De kan knytte en fetch-forespørsel til én eller flere tagger ved hjelp av next: { tags: ['tag1', 'tag2'] }.

Senere kan De kalle revalidateTag('tag1') for å ugyldiggjøre alle hurtigbufrede data som er knyttet til «tag1», uavhengig av den bestemte banen. Dette er nyttig for data som vises på mange sider, for eksempel produkter eller kategorier.

// app/products/page.tsx

export default async function ProductsPage() {
  const response = await fetch(
    'https://api.example.com/products',
    { next: { tags: ['products-list'] } } // Tag this fetch
  );
  const products = await response.json();

  return (
    <div>
      <h1>Our Products:</h1>
      <ul>
        {products.slice(0, 3).map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

Robust datahenting

Når De henter data, kan det oppstå feil (nettverksproblemer, utilgjengelig API eller ugyldige svar). Det er avgjørende å håndtere disse på en god måte for å forhindre at applikasjonen krasjer.

Legg alltid fetch-kallene i en try...catch-blokk, og kontroller egenskapen response.ok for å sikre at forespørselen var vellykket.

// app/error-example/page.tsx

export default async function ErrorExamplePage() {
  let data = null;
  let errorMessage = null;

  try {
    const response = await fetch('https://api.nonexistent.com/data');
    if (!response.ok) {
      throw new Error(`Failed to fetch: ${response.statusText}`);
    }
    data = await response.json();
  } catch (error) {
    errorMessage = error.message;
  }

  return (
    <div>
      <h1>Data Fetching with Error Handling:</h1>
      {errorMessage && <p style={{ color: 'red' }}>Error: {errorMessage}</p>}
      {data && <p>Data: {data.message}</p>}
    </div>
  );
}

Når bør De bruke hva

Valget av riktig strategi for datahenting avhenger av egenskapene til dataene:

Standard hurtigbufring (force-cache): For statisk innhold eller data som sjelden oppdateres. Gir best ytelse.
cache: 'no-store': For svært dynamiske data, sanntidsdata eller brukerspesifikke data som alltid må være oppdaterte.
next: { revalidate: seconds }: For data som oppdateres med jevne mellomrom, og som krever en balanse mellom aktualitet og ytelse.
Behovsbasert validering på nytt (revalidatePath/revalidateTag): For å utløse oppdateringer etter bestemte hendelser, for eksempel brukerhandlinger eller dataendringer i backend-systemet.

Valg ved datahenting

Hvilke fetch-alternativer vil De vanligvis bruke i følgende scenarioer i en Next.js-serverkomponent?

Besvar den i den interaktive leksjonen

Sammendrag av avansert datahenting

De har nå utforsket avanserte mønstre for datahenting i Next.js-serverkomponenter!

De kan bruke async/await direkte i serverkomponenter for å hente data.
Next.js hurtigbufrer automatisk fetch-forespørsler som standard (force-cache).
De kan omgå hurtigbufferen med cache: 'no-store' for sanntidsdata.
Implementer tidsbasert validering på nytt ved hjelp av next: { revalidate: seconds }.
Forstå konseptene behovsbasert validering på nytt med revalidatePath og revalidateTag.
Ta alltid med feilhåndtering for robuste applikasjoner.

Når De behersker disse strategiene, kan De bygge svært ytelsessterke og dynamiske 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 «Avanserte mønstre for datainnhenting» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Avanserte mønstre for datainnhenting», 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 «Avanserte mønstre for datainnhenting»?

Implementer effektiv datainnhenting med `async/await` direkte i Server Components, og utforsk strategier for revalidering. 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 «Avanserte mønstre for datainnhenting»?

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

← Tilbake til Next.js 15 for fullstack-webapper