Next.js 15 for fullstack-webapper · leksjon

Fordypning i Server Components

Oppdag hvordan Server Components gjengis på serveren, noe som forbedrer ytelsen og reduserer JavaScript på klientsiden.

Leksjon 1 av 411 trinn

Fordypning i Server Components er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 1 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.

Møt Server Components

I Next.js 15 er Server Components en stor forbedring! De lar Dem gjengi deler av React-applikasjonen direkte på serveren, før den sendes til brukerens nettleser.

Denne tilnærmingen gir store forbedringer i ytelse, sikkerhet og utvikleropplevelse, særlig med App Router.

Slik fungerer Server Components

Se for Dem at De bygger en nettside. Med Server Components gjør serveren det meste av det tunge arbeidet. Den henter data, gjengir React-komponentene som HTML og sender deretter den ferdige HTML-en (sammen med minimalt med JavaScript) til nettleseren.

Nettleseren viser deretter bare innholdet, slik at siden vises mye raskere.

Hvorfor bruke Server Components?

Server Components har flere viktige fordeler:

Mindre JavaScript-bundter: Mindre kode som sendes til nettleseren, betyr raskere nedlastinger.
Raskere første sidelasting: Innholdet er klart på serveren, slik at brukerne ser det tidligere.
Bedre SEO: Søkemotorer får se fullstendig gjengitt HTML umiddelbart.
Direkte tilgang til backend: Få trygg tilgang til databaser eller API-er uten å eksponere sensitive nøkler for klienten.

Deres første Server Component

Som standard er alle komponenter i App Router Server Components! De trenger ikke en spesiell direktiv som 'use client'.

Her er et enkelt eksempel. Denne komponenten kjører på serveren og returnerer HTML:

/* app/page.jsx */

export default function HomePage() {
  return (
    <div>
      <h1>Hello CoddyKit!</h1>
      <p>This text was rendered on the server.</p>
    </div>
  );
}

Hente data på serveren

En av de mest kraftfulle funksjonene er å hente data direkte i Server Components ved hjelp av async/await. Det er ikke nødvendig med hooks på klientsiden, som useEffect, eller biblioteker for datahenting ved grunnleggende forespørsler!

Prøv å kjøre dette eksempelet:

/* app/profile/page.jsx */

async function getUserData() {
  // In a real app, this might fetch from a database or internal API
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  if (!res.ok) {
    throw new Error('Failed to fetch user data');
  }
  return res.json();
}

export default async function ProfilePage() {
  const user = await getUserData();

  return (
    <div>
      <h1>User Profile</h1>
      <p><b>Name:</b> {user.name}</p>
      <p><b>Email:</b> {user.email}</p>
    </div>
  );
}

Økt sikkerhet med Server Components

Fordi datahenting og gjengivelse skjer på serveren, forblir sensitiv informasjon som API-nøkler, databasepåloggingsinformasjon og hemmelige miljøvariabler på serveren.

Dette forbedrer sikkerheten i applikasjonen betydelig, siden disse hemmelighetene aldri eksponeres for klientens nettleser.

Hva Server Components ikke kan gjøre

Selv om Server Components er kraftfulle, har de begrensninger. De kan ikke:

Bruke React Hooks som useState, useEffect eller useRef.
Håndtere brukerinteraksjon direkte (f.eks. knappetrykk som oppdaterer tilstanden).
Få tilgang til nettleserspesifikke API-er (f.eks. window og localStorage).

Disse interaktive funksjonene håndteres av Client Components, som vi skal utforske videre!

Når bør De bruke Server Components?

Server Components egner seg godt til:

Visning av statisk eller i hovedsak statisk innhold.
Henting og gjengivelse av data fra en backend.
Sider som krever god SEO.
Komponenter som ikke trenger interaktivitet eller tilstand på klientsiden.

Tenk på dem som arbeidshestene for «data og visning» i Next.js-appen.

Server- og klientkomponenter

For å oppsummere hovedforskjellen:

Server Components: Gjengis på serveren, henter data, bruker som standard ingen JavaScript på klientsiden og er gode for ytelse og SEO.
Client Components: Gjengis i nettleseren, håndterer interaktivitet, bruker React Hooks og krever direktivet 'use client'.

De fungerer sammen for å bygge fullstack-applikasjoner!

Rask sjekk

Test forståelsen Deres av Server Components i Next.js.

Besvar den i den interaktive leksjonen

Oppsummering: Server Components

De har lært at Server Components i Next.js gjengis på serveren og sender effektiv HTML til klienten. Dette gir raskere lasting, bedre SEO og økt sikkerhet ved at backend-logikken holdes på serveren.

Selv om de ikke støtter interaktivitet på klientsiden, er de grunnleggende for å bygge høytytende Next.js-applikasjoner.

Deretter skal vi se nærmere på Client Components og hvordan de tilfører interaktivitet til appen!

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 «Fordypning i Server Components» gratis?

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

Oppdag hvordan Server Components gjengis på serveren, noe som forbedrer ytelsen og reduserer JavaScript på klientsiden. 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 1 av 4.

Hvor lang tid tar leksjonen «Fordypning i Server Components»?

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