React Server Components (RSC) verändern grundlegend, wie wir über das Rendern von React-Anwendungen denken. Statt alles im Browser auszuführen, läuft ein Teil der Komponenten ausschließlich auf dem Server.
Server vs. Client Components
Server Components werden auf dem Server gerendert und senden nur das fertige Ergebnis an den Client. Das reduziert das JavaScript-Bundle erheblich, da der Komponenten-Code niemals an den Browser ausgeliefert wird.
- Kein JavaScript im Bundle für reine Server Components
- Direkter Zugriff auf Backend-Ressourcen wie Datenbank oder Dateisystem
- Sensible Daten und Secrets bleiben sicher auf dem Server
Wann Client Components?
Sobald Interaktivität ins Spiel kommt – State, Event-Handler oder Browser-APIs – brauchst du Client Components. Markiere sie mit der Direktive "use client" am Dateianfang.
"use client";
import { useState } from "react";
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Die Faustregel: Server Components als Standard, Client Components nur dort, wo Interaktivität wirklich nötig ist.
Mit diesem mentalen Modell schöpfst du das volle Potenzial moderner React-Frameworks wie Next.js aus – kleinere Bundles, schnellere Ladezeiten und eine klarere Trennung von Verantwortlichkeiten.