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

Datahämtning på serversidan

Implementera robust datahämtning på serversidan med `fetch` och andra metoder i Server Components för optimal prestanda

Lektion 1 av 311 steg

Datahämtning på serversidan är en gratis lektion i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15 fullstack (App Router + Server Actions), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 3 lektioner.

Varför hämta data på servern?

Next.js 15 är utmärkt på att rendera din applikation på servern. Det är mycket kraftfullt för prestanda och SEO!

När du hämtar data direkt på servern ser användarna innehållet snabbare, eftersom HTML-koden redan har byggts med data. Det hjälper också sökmotorer att indexera ditt innehåll bättre.

Prestanda: Snabbare initiala sidladdningar.
SEO: Innehållet är tillgängligt för sökrobotar.
Säkerhet: Behåll känslig logik på servern.

Förbättrad `fetch` för Server Components

I Next.js 15 Server Components är standard-API:t fetch från Web API automatiskt förbättrat. Det innebär att det har inbyggda funktioner för cachning och omvalidering.

Du kan använda fetch direkt i dina async Server Components för att hämta data från externa API:er eller dina egna backendtjänster.

Hämta data i en komponent

Vi ser hur enkelt det är att hämta data. Här hämtar vi ett enskilt objekt av typen "Todo" från ett offentligt API. Lägg märke till nyckelordet async i komponentfunktionen.

Next.js väntar på datan innan komponenten renderas.

Kör det här grundläggande fetch-exemplet

Den här JavaScript-koden visar hur du hämtar data från ett offentligt API. En Next.js Server Component använder JSX, men den underliggande fetch-logiken är densamma. Kör koden för att se datan!

async function fetchTodo() {
  const url = 'https://jsonplaceholder.typicode.com/todos/1';
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log("Fetched Todo Title:", data.title);
  } catch (error) {
    console.error("Fetch failed:", error);
  }
}

fetchTodo();

Automatisk cachning med `fetch`

Som standard cachar Next.js automatiskt resultaten av fetch-förfrågningar i Server Components. Om samma fetch-förfrågan görs igen (till exempel i flera komponenter eller vid omrenderingar) använder Next.js den cachade datan.

Detta är utmärkt för prestandan eftersom det undviker överflödiga nätverksförfrågningar.

Välj bort cachning

Ibland behöver du den färskaste datan och vill kringgå cachen. Det gör du genom att skicka ett alternativ till fetch: { cache: 'no-store' }. Då talar du om för Next.js att alltid hämta datan på nytt.

Använd 'no-store' för mycket dynamiska data som ändras ofta och måste vara uppdaterade vid varje förfrågan.

async function fetchFreshData() {
  const url = 'https://jsonplaceholder.typicode.com/posts/1';
  // 'no-store' ensures data is always fresh
  const response = await fetch(url, { cache: 'no-store' });
  const data = await response.json();
  console.log("Fresh Post Title:", data.title);
}

fetchFreshData();

Omvalidera data vid behov

Vad gör du om du vill använda cachad data men samtidigt ange hur länge den ska betraktas som ”färsk”? Du kan använda alternativet next.revalidate tillsammans med fetch.

Detta anger en livslängd (TTL) för datan. Efter den tiden hämtar nästa förfrågan datan på nytt och uppdaterar cachen.

async function fetchRevalidatedData() {
  const url = 'https://jsonplaceholder.typicode.com/users/1';
  // Revalidate data every 60 seconds
  const response = await fetch(url, { next: { revalidate: 60 } });
  const data = await response.json();
  console.log("User Name (revalidated):", data.name);
}

fetchRevalidatedData();

`revalidate` jämfört med `no-store`

Valet mellan cache: 'no-store' och next: { revalidate: N } beror på vad din data kräver:

no-store: Använd för data som måste vara helt färsk vid varje förfrågan (till exempel aktiekurser i realtid eller en användarspecifik varukorg).
revalidate: N: Använd för data som kan vara något inaktuell men bör uppdateras regelbundet (till exempel blogginlägg eller produktlistor som ändras varje timme).
Standard (cachad): Använd för statisk data eller data som ändras sällan (till exempel navigeringslänkar eller statiskt sidinnehåll).

Bortom `fetch`: direkt åtkomst till databaser

Även om fetch är kraftfullt för externa API:er kan Server Components också kommunicera direkt med databaser eller ORM:er som Prisma. Eftersom Server Components körs på servern kan de innehålla databasuppgifter på ett säkert sätt.

Det innebär att du kan skriva kod som await prisma.user.findMany() direkt i dina komponenter, vilket håller klientpaketet litet och säkert.

Alternativ för datahämtning

Vilka av följande påståenden om datahämtning på serversidan i Next.js 15 är SANNA?

Besvara frågan i den interaktiva lektionen

Sammanfattning: datahämtning på serversidan

Du har lärt dig hur du utnyttjar datahämtning på serversidan i Next.js 15!

fetch i Server Components optimeras automatiskt med cachning.
Använd cache: 'no-store' för data som alltid ska vara färsk.
Använd next: { revalidate: N } för tidsbaserad aktualitet.
Server Components kan också få säker direktåtkomst till databaser.

Att behärska dessa tekniker är viktigt för att bygga snabba, effektiva och säkra Next.js-applikationer.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Datahämtning på serversidan” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15 fullstack (App Router + Server Actions), inklusive ”Datahämtning på serversidan”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 3 lektioner.

Vad lär jag mig i ”Datahämtning på serversidan”?

Implementera robust datahämtning på serversidan med `fetch` och andra metoder i Server Components för optimal prestanda Ni övar på Next.js 15 fullstack (App Router + Server Actions) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15 fullstack (App Router + Server Actions)?

Du behöver inga förkunskaper. Utbildningen i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.

Hur lång tid tar lektionen ”Datahämtning på serversidan”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15 fullstack (App Router + Server Actions)-lektionen?

Ja. Varje Next.js 15 fullstack (App Router + Server Actions)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Datahämtning på serversidan
Cachelagring och omvalidering
Parallell, sekventiell och strömmande datahämtning

← Tillbaka till Next.js 15 fullstack (App Router + Server Actions)