Datainnhenting på serversiden
Implementer robust datainnhenting på serversiden med `fetch` og andre metoder i Server Components for optimal ytelse.
Datainnhenting på serversiden er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 1 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 hente data på serveren?
Next.js 15 er svært godt egnet til å rendre applikasjonen på serveren. Dette er svært kraftig for ytelse og SEO!
Når De henter data direkte på serveren, ser brukerne innholdet raskere fordi HTML-en allerede er bygget med dataene. Det hjelper også søkemotorer med å indeksere innholdet bedre.
- Ytelse: Raskere innlasting av siden første gang.
- SEO: Innholdet er tilgjengelig for søkemotorroboter.
- Sikkerhet: Hold sensitiv logikk på serveren.
Forbedret `fetch` for Server Components
I Next.js 15 blir standard-API-et fetch fra Web automatisk forbedret i Server Components. Det betyr at det har innebygde funksjoner for hurtigbufring og revalidering.
De kan bruke fetch direkte i async Server Components for å hente data fra eksterne API-er eller egne backend-tjenester.
Henting av data i en komponent
La oss se hvor enkelt det er å hente data. Her henter vi ett «Todo»-element fra et offentlig API. Legg merke til nøkkelordet async på komponentfunksjonen.
Next.js håndterer ventingen på data før komponenten rendres.
Kjør dette enkle fetch-eksempelet
Denne JavaScript-koden viser hvordan data hentes fra et offentlig API. Selv om en Next.js Server Component bruker JSX, er den underliggende fetch-logikken den samme. Kjør koden for å se dataene!
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 hurtigbufring med `fetch`
Som standard hurtigbufrer Next.js automatisk resultatene av fetch-forespørsler i Server Components. Hvis den samme fetch-forespørselen gjøres på nytt, for eksempel på tvers av flere komponenter eller rendringer, bruker Next.js de hurtigbufrede dataene.
Dette er svært nyttig for ytelsen, fordi det unngår unødvendige nettverksforespørsler.
Deaktivere hurtigbufring
Noen ganger trenger De de nyeste dataene og vil omgå hurtigbufferet. Dette kan De gjøre ved å sende et alternativ til fetch: { cache: 'no-store' }. Dette forteller Next.js at dataene alltid skal hentes på nytt.
Bruk 'no-store' for svært dynamiske data som endres ofte og må være oppdaterte ved hver forespørsel.
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();Revalidere data ved behov
Hva om De vil bruke hurtigbufrede data, men også angi hvor ofte de skal regnes som «ferske»? De kan bruke alternativet next.revalidate sammen med fetch.
Dette angir en levetid (TTL) for dataene. Etter dette tidsrommet vil den neste forespørselen hente dataene på nytt og oppdatere hurtigbufferet.
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` kontra `no-store`
Valget mellom cache: 'no-store' og next: { revalidate: N } avhenger av behovene til dataene:
no-store: Brukes for data som må være helt ferske ved hver forespørsel, for eksempel aksjekurser i sanntid eller en brukers handlekurv.revalidate: N: Brukes for data som kan være litt utdaterte, men bør oppdateres med jevne mellomrom, for eksempel blogginnlegg eller produktlister som endres hver time.- Standard (hurtigbufret): Brukes for statiske data eller data som endres sjelden, for eksempel navigasjonslenker eller statisk sideinnhold.
Utover `fetch`: Direkte databasetilgang
Selv om fetch er effektivt for eksterne API-er, kan Server Components også kommunisere direkte med databaser eller ORM-er som Prisma. Siden Server Components kjører på serveren, kan de trygt inneholde databasepåloggingsinformasjon.
Det betyr at De kan skrive kode som await prisma.user.findMany() direkte i komponentene, samtidig som klientpakken holdes liten og sikker.
Alternativer for datahenting
Hvilke av følgende påstander om datahenting på serversiden i Next.js 15 er RIKTIGE?
Oppsummering: Datahenting på serversiden
De har lært hvordan De kan utnytte datahenting på serversiden i Next.js 15!
fetchi Server Components optimaliseres automatisk med hurtigbufring.- Bruk
cache: 'no-store'for data som alltid skal være ferske. - Bruk
next: { revalidate: N }for tidsbasert oppdatering av data. - Server Components kan også få sikker, direkte tilgang til databaser.
Å beherske disse teknikkene er viktig for å bygge raske, effektive og sikre Next.js-applikasjoner.
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
Ofte stilte spørsmål
Er leksjonen «Datainnhenting på serversiden» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Datainnhenting 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 fullstack (App Router + Server Actions) inneholder totalt 3 leksjoner.
Hva lærer jeg i «Datainnhenting på serversiden»?
Implementer robust datainnhenting på serversiden med `fetch` og andre metoder i Server Components for optimal ytelse. 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 1 av 3.
Hvor lang tid tar leksjonen «Datainnhenting 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 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