Server & Client Components

Im App Router ist jede Komponente zunächst eine Server Component. Sie rendert auf dem Server, liefert HTML und schickt kein JavaScript für sich selbst an den Browser. Interaktives braucht dagegen eine Client Component.

Server als Standard

// Server Component (Standard) – läuft nur auf dem Server, kein Client-JS
export default async function Produktliste() {
    const produkte = await getProdukte(); // direkter Datenzugriff
    return <ul>{produkte.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

Client, wenn es interaktiv wird

Eine Client Component wird mit einer Direktive am Dateianfang markiert:

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

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

Was wohin gehört

Die Grenze richtig ziehen

'use client' markiert die Grenze, ab der das Client-Bundle beginnt – alles darunter im Baum wird ebenfalls Client.

Faustregel: Server als Standard lassen, 'use client' so weit wie möglich nach unten schieben. Nur die wirklich interaktiven Blätter werden Client-Komponenten. Und: Über die Grenze wandern nur serialisierbare Props – keine Funktionen, keine Klassen.

Wo Server Components glänzen, ist das Datenladen – der nächste Punkt.