React Academy · Lektion

React Server Components forklaret

Forstå, hvad RSC’er er, hvordan de adskiller sig fra klientkomponenter, og hvornår hver type bør bruges.

Lektion 1 af 413 trin

React Server Components forklaret er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du, hvad React Server Components (RSC'er) er, hvordan de adskiller sig fra klientkomponenter, og hvornår du skal bruge de forskellige typer.

De to komponentverdener

React 19 og Next.js App Router opdeler komponenter i to verdener: **serverkomponenter** (gengives på serveren uden interaktivitet) og **klientkomponenter** (gengives på både server og klient og har tilstand samt hændelseshandlere).

Serverkomponenter som standard

I Next.js App Router er alle komponenter som standard serverkomponenter. Du vælger klientkomponenttilstand ved at tilføje 'use client' øverst i filen.

// Server Component (default, no directive needed)
export default async function Page() {
  const data = await fetch('/api/posts').then(r => r.json());
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Klientkomponenter

Tilføj 'use client' øverst i en fil for at gøre den til en klientkomponent. Klientkomponenter kan bruge useState, useEffect, hændelseshandlere og browser-API'er.

'use client';
import { useState } from 'react';

export function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n+1)}>{n}</button>;
}

Serverkomponenters muligheder

Serverkomponenter kan: afvente databaseforespørgsler, læse filsystemet, få adgang til miljøhemmeligheder, importere store pakker, der kun må bruges på serveren, og gengive uden at sende JavaScript til klienten.

// Fetch from DB directly in the component!
import { db } from '@/lib/db';

export default async function UserList() {
  const users = await db.select().from(usersTable);
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Serverkomponenters begrænsninger

Serverkomponenter KAN IKKE: bruge useState, useEffect, hændelseshandlere (onClick osv.), browser-API'er (window, localStorage) eller Context. Det kræver 'use client'.

Sammensætning af server- og klientkomponenter

Det almindelige mønster er, at en serverkomponent henter data og sender dem til en klientkomponent som props. Serveren håndterer data; klienten håndterer interaktion.

// Server Component
export default async function Page() {
  const user = await getUser();
  return <ProfileEditor user={user} />; // client component
}

// Client Component (separate file)
'use client';
export function ProfileEditor({ user }) {
  const [name, setName] = useState(user.name);
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

Reglen for klientgrænsen

Når du markerer en fil med 'use client', behandles alle dens importerede komponenter også som klientkomponenter. Grænsen mellem server og klient går på filniveau.

Ingen JavaScript for serverkomponenter

Serverkomponenter gengives som HTML på serveren. Deres komponentkode sendes ALDRIG til browseren. Det reducerer JavaScript-pakkens størrelse betydeligt.

Serverkomponenter kontra SSR

Traditionel SSR gengiver en hel side som HTML, men sender al komponentkode til klienten, så den kan hydreres. Serverkomponenter sender slet ikke deres kode til klienten — kun deres gengivne resultat.

Hurtigt tjek

Hvilket direktiv tilføjer du til en fil for at gøre den til en React-klientkomponent i Next.js App Router?

Besvar den i den interaktive lektion

Opsummering

Serverkomponenter kører på serveren, kan få adgang til databaser og hemmeligheder og sender ingen JS til klienten. Klientkomponenter tilføjer 'use client' og understøtter tilstand, effekter og hændelseshandlere. Sammensæt dem: serveren henter data, klienten interagerer.

Næste trin

Næste lektion: **use()-hooket til asynkrone ressourcer** — du vil læse Promises og Context under gengivelsen med React 19-hooket use().

Gratis at komme i gang

Lær React 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: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “React Server Components forklaret” gratis?

Ja — hele teksten til “React Server Components forklaret” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “React Server Components forklaret”?

Forstå, hvad RSC’er er, hvordan de adskiller sig fra klientkomponenter, og hvornår hver type bør bruges. Du øver dig i React Academy 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å React Academy?

Der kræves ingen tidligere erfaring. React Academy 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 1 af 4.

Hvor lang tid tager lektionen “React Server Components forklaret”?

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 React Academy-lektion?

Ja. Alle React Academy-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

← Tilbage til React Academy