Server- und Client-Components in Next.js
Entscheiden Sie, wann Sie 'use client' hinzufügen und wie Sie Server- und Client-Bäume zusammensetzen.
Server- und Client-Components in Next.js ist eine kostenlose React 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 React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Der Standard: Server Components
Im App Router sind alle Komponenten standardmäßig Server Components. Sie werden auf dem Server gerendert, benötigen kein clientseitiges JavaScript und können direkt auf Datenbanken, Umgebungsvariablen und das Dateisystem zugreifen.
Client Components aktivieren
Fügen Sie am Anfang einer Datei 'use client' ein, um sie zu einer Client Component zu machen. Alle ihre Importe werden ebenfalls clientseitig – dadurch entsteht eine Client-Grenze.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Was Server Components können
Server Components können Datenabrufe direkt mit await ausführen, Umgebungsvariablen lesen, auf das Dateisystem zugreifen und große serverseitige Pakete importieren, ohne das Client-Bundle zu vergrößern.
// app/products/page.tsx — Server Component
export default async function ProductsPage() {
const products = await db.query('SELECT * FROM products');
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}Was Server Components nicht können
Server Components können keine Hooks (useState, useEffect), Browser-APIs oder Event-Handler verwenden. Dafür ist 'use client' erforderlich.
Server und Client kombinieren
Übergeben Sie die Ausgabe einer Server Component als Props oder children an Client Components. Das bewährte Muster lautet: Daten in Server Components abrufen und Interaktivität in Client Components umsetzen.
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await getProduct(id); // direct DB call
return <AddToCartButton product={product} />; // client component
}
// Client Component
'use client';
function AddToCartButton({ product }) {
const [added, setAdded] = useState(false);
return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}Children von Server an Client übergeben
Eine Server Component kann JSX als children an eine Client Component übergeben. Die Children bleiben serverseitig gerendert; der Client-Wrapper fügt Interaktivität hinzu.
// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <dialog>{children}</dialog>}
</>
);
}
// Server Component — passes server-fetched content into client modal
async function Page() {
const content = await fetchContent();
return <Modal><ServerRenderedContent data={content} /></Modal>;
}Die Client-Grenze
Durch das Hinzufügen von 'use client' werden die Datei und alle von ihr importierten untergeordneten Module clientseitig. Damit ein untergeordnetes Element eine Server Component bleibt, übergeben Sie es stattdessen als Prop oder Slot, anstatt es direkt zu importieren.
Muster für Datenabrufe
Rufen Sie Daten in Server Components ab und geben Sie sie nach unten weiter. Vermeiden Sie Datenabrufe in Client Components, wenn möglich – sie vergrößern das Client-Bundle und duplizieren serverseitige Logik.
// Good: fetch in server, pass to client
async function Page() {
const user = await getUser();
return <UserProfile user={user} />; // client component
}
// Avoid: fetch in client
'use client';
function UserProfile() {
const { data } = useSWR('/api/user', fetcher); // network request from browser
}Nur-serverseitige Hilfsfunktionen
Das Paket server-only löst einen Build-Fehler aus, wenn ein nur serverseitig verwendetes Modul versehentlich in eine Client Component importiert wird.
// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file
export const db = createDbClient(process.env.DB_URL);Zustand zwischen Server und Client teilen
Server Components können keinen Zustand speichern. Um den Zustand eines serverseitigen Datenabrufs mit interaktiven Client Components zu teilen, übergeben Sie ihn beim ersten Rendern als Props und verwalten Sie Aktualisierungen anschließend im Client.
Wann Sie use client hinzufügen sollten
Fügen Sie 'use client' hinzu, wenn Sie Folgendes benötigen: Hooks (useState, useEffect), Browser-Ereignisse (onClick), Browser-APIs (localStorage, window) oder clientseitige Bibliotheken von Drittanbietern.
Kurztest
Was müssen Sie am Anfang einer Datei hinzufügen, um useState oder onClick im App Router von Next.js zu verwenden?
Zusammenfassung
Alle Komponenten des App Routers sind standardmäßig Server Components – ohne JavaScript-Bundle und mit direktem Datenzugriff. Fügen Sie 'use client' nur dort hinzu, wo Sie Interaktivität benötigen. Kombinieren Sie die Komponenten, indem Sie serverseitig abgerufene Daten als Props oder Children an Client-Wrapper übergeben, und halten Sie die Client-Grenze so nah wie möglich an den Blättern des Komponentenbaums.
Häufig gestellte Fragen
Ist die Lektion „Server- und Client-Components in Next.js“ kostenlos?
Ja — der vollständige Text von „Server- und Client-Components in Next.js“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Server- und Client-Components in Next.js“?
Entscheiden Sie, wann Sie 'use client' hinzufügen und wie Sie Server- und Client-Bäume zusammensetzen. Du übst React 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 React Academy zu starten?
Keine Vorkenntnisse erforderlich. React 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- und Client-Components in Next.js“?
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 React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React 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
- Dateikonventionen im App Router
- Server- und Client-Components in Next.js
- Dynamische Routes und Route-Gruppen
- Metadata API und SEO im App Router