React Academy · Les

React Server Components uitgelegd

Begrijp wat RSC's zijn, waarin ze verschillen van clientcomponenten en wanneer u elk type gebruikt.

Les 1 van 413 stappen

React Server Components uitgelegd is een gratis React Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Welkom

In deze les leer je wat React Server Components (RSC's) zijn, hoe ze verschillen van clientcomponenten en wanneer je elk type gebruikt.

De twee componentwerelden

React 19 en de App Router van Next.js verdelen componenten over twee werelden: **Server Components** (worden op de server gerenderd en hebben geen interactiviteit) en **Client Components** (worden op zowel de server als de client gerenderd en hebben status en gebeurtenisafhandelaars).

Server Components standaard

In de App Router van Next.js is elk component standaard een Server Component. Je schakelt de modus Client Component in door bovenaan het bestand 'use client' toe te voegen.

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

Client Components

Voeg bovenaan een bestand 'use client' toe om er een Client Component van te maken. Client Components kunnen useState, useEffect, gebeurtenisafhandelaars en browser-API's gebruiken.

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

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

Mogelijkheden van Server Components

Server Components kunnen: databasequeries afwachten, het bestandssysteem lezen, omgevingsgeheimen benaderen, grote pakketten die alleen op de server werken importeren en renderen zonder JavaScript naar de client te sturen.

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

Beperkingen van Server Components

Server Components kunnen NIET: useState, useEffect, gebeurtenisafhandelaars (onClick enzovoort), browser-API's (window, localStorage) of Context gebruiken. Hiervoor is 'use client' vereist.

Server- en Client Components combineren

Het gebruikelijke patroon: een Server Component haalt gegevens op en geeft die als props door aan een Client Component. De server verwerkt de gegevens; de client verwerkt de interactie.

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

De regel voor de clientgrens

Zodra je een bestand markeert met 'use client', worden alle geïmporteerde componenten ervan ook behandeld als clientcomponenten. De grens tussen server en client ligt op bestandsniveau.

Geen JavaScript voor Server Components

Server Components worden op de server naar HTML gerenderd. Hun componentcode wordt NOOIT naar de browser gestuurd. Dit verkleint de JavaScript-bundel aanzienlijk.

Server Components versus SSR

Traditionele SSR rendert een volledige pagina naar HTML, maar stuurt alle componentcode naar de client voor hydratatie. Server Components sturen hun code helemaal niet naar de client — alleen hun gerenderde uitvoer.

Korte controle

Welke instructie voeg je aan een bestand toe om er in de App Router van Next.js een React Client Component van te maken?

Beantwoord dit in de interactieve les

Samenvatting

Server Components worden op de server uitgevoerd, kunnen databases en geheimen benaderen en sturen geen JS naar de client. Client Components voegen 'use client' toe en ondersteunen status, effecten en gebeurtenisafhandelaars. Combineer ze: de server haalt gegevens op, de client verwerkt interacties.

Hierna

Volgende les: **De use()-hook voor asynchrone bronnen** — je leert promises en context tijdens het renderen te lezen met de use()-hook van React 19.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “React Server Components uitgelegd” gratis?

Ja — de volledige tekst van “React Server Components uitgelegd” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “React Server Components uitgelegd”?

Begrijp wat RSC's zijn, waarin ze verschillen van clientcomponenten en wanneer u elk type gebruikt. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “React Server Components uitgelegd”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar React Academy