0Pricing
Frontend Academy · Lektion

Server Components und Client Components

Verstehen Sie React Server Components, wann Sie die Direktive 'use client' hinzufügen müssen und wie Sie serverseitig gerendertes HTML mit interaktiven Client-Inseln kombinieren.

Server Components und Client Components ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei Welten in einer App

Mit React Server Components (RSC) können Sie einen Komponentenbaum zwischen serverseitig gerenderten und clientseitig interaktiven Teilen aufteilen. Im Next.js App Router sind Komponenten standardmäßig Server-Komponenten. Mit 'use client' aktivieren Sie eine Client-Komponente.

Was Server-Komponenten tun

Server-Komponenten werden ausschließlich auf dem Server ausgeführt. Sie können Daten direkt abrufen, auf das Dateisystem zugreifen, nur auf dem Server verfügbare Geheimnisse verwenden und HTML rendern, ohne React an den Client auszuliefern. Sie können jedoch keine Hooks verwenden, keinen Zustand verwalten und keine Ereignisse behandeln.

Was Client-Komponenten tun

Client-Komponenten werden für SSR (initiales HTML) auf dem Server und für die Interaktivität auf dem Client ausgeführt. Sie können useState, useEffect, Event-Handler und Browser-APIs verwenden.

Standardmäßig Server

Im Next.js App Router ist jede Komponente standardmäßig eine Server-Komponente. Das ist ideal, da der größte Teil Ihrer App statisch gerendert wird.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Client-Komponenten aktivieren

Fügen Sie am Anfang einer Datei 'use client' ein, um ihre Komponenten und deren Importe als Client-Komponenten zu kennzeichnen.

// app/Counter.tsx
'use client';

import { useState } from 'react';

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

Server und Client kombinieren

Server-Komponenten können Client-Komponenten rendern, Client-Komponenten können jedoch keine Server-Komponenten importieren. Übergeben Sie serverseitig gerenderte Inhalte als children an Client-Wrapper.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

Warum dieses Muster wichtig ist

Kleinere JavaScript-Bundles – nur Client-Komponenten werden an den Browser ausgeliefert. Direkter Zugriff auf Datenbanken und Dateien – für schreibgeschützte Daten ist keine API-Schicht erforderlich. Bessere SEO und schnelleres LCP – das HTML wird vollständig gerendert ausgeliefert.

Regeln für die Client-Grenze

Sobald eine Datei mit 'use client' gekennzeichnet ist, werden alle Komponenten in dieser Datei und alle importierten untergeordneten Komponenten zu Client-Komponenten. 'use client' markiert die Grenze zwischen Server und Client.

Server Actions

Mit 'use server' gekennzeichnete Funktionen werden ausschließlich auf dem Server ausgeführt, können aber aus Client-Komponenten aufgerufen werden – ähnlich wie RPC. Sie werden häufig für Formularübermittlungen und Mutationen verwendet.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Props vom Server an den Client übergeben

Props, die vom Server an den Client übergeben werden, müssen JSON-serialisierbar sein – keine Funktionen, Klassen oder Dates mit benutzerdefinierten Strukturen. Konvertieren Sie sie vor der Übergabe.

Die jeweiligen Typen erkennen

Sehen Sie sich die Importe an: useState, useEffect und onClick-Handler machen eine Komponente zwingend zu einer Client-Komponente. Eine reine Datendarstellung kann eine Server-Komponente bleiben.

Leistungsvorteile

Server-Komponenten verkleinern das JavaScript-Bundle erheblich. Eine Seite mit überwiegend statischen Inhalten und einigen interaktiven Widgets sendet nur das JavaScript für die interaktiven Teile – manchmal 90 % weniger.

Schnelltest

Welcher React-Hook ist in einer Next.js Server-Komponente NICHT erlaubt?

Zusammenfassung: Server vs. Client

Server-Komponenten: werden nur auf dem Server ausgeführt, async/await ist möglich, keine Hooks, Zustände oder Handler, kleinere Bundles. Client-Komponenten: werden mit 'use client' aktiviert und sind mit useState/useEffect/Ereignissen interaktiv. Der Server kann den Client rendern; der Client kann den Server nicht importieren, aber als children empfangen. Server Actions ('use server') eignen sich für RPC-ähnliche Mutationen.

Häufig gestellte Fragen

Ist die Lektion „Server Components und Client Components“ kostenlos?

Ja — der vollständige Text von „Server Components und Client Components“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Server Components und Client Components“?

Verstehen Sie React Server Components, wann Sie die Direktive 'use client' hinzufügen müssen und wie Sie serverseitig gerendertes HTML mit interaktiven Client-Inseln kombinieren. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Server Components und Client Components“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Pages Router vs. App Router
  2. Server Components und Client Components
  3. SSG, SSR und ISR
  4. Next.js API-Routen und Middleware
← Zurück zu Frontend Academy