Next.js 15-fullstackwebapps · Lektion

Avancerede mønstre til datahentning

Implementér effektiv datahentning med `async/await` direkte i Server Components, og udforsk strategier til revalidering.

Lektion 3 af 411 trin

Avancerede mønstre til datahentning er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Effektiv datahentning

I Next.js er effektiv datahentning afgørende for at bygge hurtige og responsive applikationer. Vi har set på grundlæggende datahentning, men hvad med avancerede strategier?

I denne lektion undersøger vi, hvordan du finjusterer din datahentning i serverkomponenter for at styre caching og sikre aktuelle data, hvilket giver bedre ydeevne og brugeroplevelse.

Direkte datahentning fra serveren

App Router i Next.js 15 giver dig mulighed for at bruge async/await direkte i serverkomponenter. Det betyder, at du kan hente data lige dér, hvor du gengiver din brugergrænseflade, uden at have brug for hooks på klientsiden eller API-ruter.

Her er et enkelt eksempel på hentning af 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 caching

Som standard cacher Next.js automatisk fetch-anmodninger, der foretages i serverkomponenter. Det er en effektiv optimering!

Standardadfærden svarer til at bruge { cache: 'force-cache' }.
Det er ideelt til data, der ikke ændrer sig ofte, f.eks. blogindlæg eller produktdetaljer.
Når dataene først er hentet, bruger efterfølgende anmodninger til den samme URL inden for et bestemt tidsrum de cachede data, hvilket gør sideindlæsninger hurtigere.

Altid aktuelle data

Nogle gange har du brug for de absolut seneste data ved hver anmodning, uden om enhver cache. Her er cache: 'no-store' nyttig.

Brug den til meget dynamisk indhold, brugerspecifikke data eller realtidsfeeds, hvor selv få sekunders forældede data ikke kan accepteres.

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

Hvad nu, hvis du har brug for aktuelle data, men ikke ved hver eneste anmodning? Du kan bede Next.js om at genvalidere (hente igen) data efter et bestemt tidsrum ved hjælp af next: { revalidate: seconds }.

Det er perfekt til indhold, der opdateres med jævne mellemrum, f.eks. nyhedsartikler eller aktiekurser, fordi det afvejer aktualitet og ydeevne.

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

Genvalidering efter sti

Ud over tidsbaseret genvalidering tilbyder Next.js også genvalidering efter behov. Det betyder, at du programmatisk kan bede Next.js om at hente data igen for en bestemt side eller sti.

Funktionen revalidatePath('/your-path') kaldes typisk fra en serverhandling eller en API-rute. Efter en dataændring (f.eks. når en bruger opdaterer sin profil) kan du ugyldiggøre cachen for brugerens profilside, så vedkommende straks ser de seneste data.

Genvalidering efter mærke

En mere fleksibel tilgang til genvalidering efter behov er at bruge mærker. Du kan knytte en fetch-anmodning til et eller flere mærker ved hjælp af next: { tags: ['tag1', 'tag2'] }.

Senere kan du kalde revalidateTag('tag1') for at ugyldiggøre alle cachede data, der er knyttet til 'tag1', uanset den specifikke sti. Det er effektivt til data, der vises på mange sider, f.eks. 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 datahentning

Når du henter data, kan der opstå fejl (netværksproblemer, API-nedetid, ugyldige svar). Det er afgørende at håndtere dem på en god måde, så din applikation ikke går ned.

Pak altid dine fetch-kald ind i en try...catch-blok, og kontrollér egenskaben response.ok for at sikre, at anmodningen lykkedes.

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

Hvornår skal du bruge hvad

Valget af den rette strategi til datahentning afhænger af dine datas egenskaber:

Standard-caching (force-cache): Til statisk indhold eller data, der sjældent opdateres. Bedste ydeevne.
cache: 'no-store': Til meget dynamiske data, realtidsdata eller brugerspecifikke data, der altid skal være aktuelle.
next: { revalidate: seconds }: Til data, der opdateres med jævne mellemrum, så aktualitet og ydeevne afvejes.
Genvalidering efter behov (revalidatePath/revalidateTag): Til at udløse opdateringer efter bestemte hændelser, f.eks. brugerhandlinger eller dataændringer i din backend.

Valg af datahentning

Hvilke fetch-indstillinger ville du typisk bruge i følgende scenarier i en Next.js-serverkomponent?

Besvar den i den interaktive lektion

Opsummering af avanceret datahentning

Du har nu udforsket avancerede mønstre til datahentning i Next.js-serverkomponenter!

Du kan bruge async/await direkte i serverkomponenter til at hente data.
Next.js cacher automatisk fetch-anmodninger som standard (force-cache).
Du kan omgå cachen med cache: 'no-store' til realtidsdata.
Implementér tidsbaseret genvalidering ved hjælp af next: { revalidate: seconds }.
Forstå begreberne genvalidering efter behov med revalidatePath og revalidateTag.
Medtag altid fejlhåndtering for at gøre applikationer robuste.

Når du mestrer disse strategier, kan du bygge Next.js-applikationer med høj ydeevne og dynamisk indhold!

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Avancerede mønstre til datahentning” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “Avancerede mønstre til datahentning”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Avancerede mønstre til datahentning”?

Implementér effektiv datahentning med `async/await` direkte i Server Components, og udforsk strategier til revalidering. Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Avancerede mønstre til datahentning”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Dybdegående gennemgang af Server Components
Client Components og interaktivitet
Avancerede mønstre til datahentning
Caching, revalidering og streaming

← Tilbage til Next.js 15-fullstackwebapps