Kompositionsmuster für Server- und Client-Komponenten
Lernen Sie, Server- und Client-Komponenten korrekt zu komponieren und Server-Komponenten als children zu übergeben, um das Client-Bundle schlank zu halten
Kompositionsmuster für Server- und Client-Komponenten ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 4 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 Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
The Composition Challenge
You often need interactivity (Client) wrapping data-heavy UI (Server). The trick is composing them so Server Components are not pulled into the client bundle.
The One-Way Rule
A Client Component cannot import a Server Component, because importing would force it to run on the client. But it can render one passed as children.
Passing as Children
Render a Server Component inside a Client Component by passing it through props from a parent Server Component.
export default function Page() {
return (<ClientShell><ServerContent /></ClientShell>);
}The Client Shell
The Client Component receives the already-rendered Server output as children and never needs to know how it was built.
"use client";
export default function ClientShell({ children }) {
const [open, setOpen] = useState(false);
return (<div>{children}<button onClick={() => setOpen(!open)}>Toggle</button></div>);
}Why This Works
The Server Component renders on the server; only its output (serialized RSC payload) reaches the client. The Client Component just slots it in — no server code shipped.
Props Must Be Serializable
Props passed from Server to Client Components must be serializable. You cannot pass functions, class instances, or Dates without care — but you can pass plain data and JSX children.
Moving Client Boundaries Down
Keep "use client" as deep in the tree as possible. A small leaf Client Component keeps most of the tree server-rendered and the bundle small.
Context Providers
Client context providers wrap Server children fine: define the provider as a Client Component and pass server-rendered children through it.
"use client";
export function ThemeProvider({ children }) {
return <Ctx.Provider value={theme}>{children}</Ctx.Provider>;
}Avoiding Accidental Client Code
Importing a library that uses browser APIs into a Server Component breaks it. Isolate such code behind a Client Component boundary.
Interleaving Example
You can deeply interleave: Server layout, Client sidebar toggler, Server content, Client like-button — each boundary minimal and intentional.
Mental Model
Think of Client Components as holes in a server-rendered tree. Data flows down as props/children; interactivity lives only where needed.
Quick Check
How do you render a Server Component inside a Client Component?
Recap
You learned the key composition pattern: Client Components cannot import Server Components but can render them as children. Keep client boundaries small and deep, pass serializable props, and treat Client Components as interactive holes in a server-rendered tree.
Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 22
- Lektionen
- 88
Häufig gestellte Fragen
Ist die Lektion „Kompositionsmuster für Server- und Client-Komponenten“ kostenlos?
Ja — der vollständige Text von „Kompositionsmuster für Server- und Client-Komponenten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Kompositionsmuster für Server- und Client-Komponenten“?
Lernen Sie, Server- und Client-Komponenten korrekt zu komponieren und Server-Komponenten als children zu übergeben, um das Client-Bundle schlank zu halten Du übst Next.js 15 Fullstack (App Router + Server Actions) 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 Next.js 15 Fullstack (App Router + Server Actions) zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) 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 4 von 4.
Wie lange dauert die Lektion „Kompositionsmuster für Server- und Client-Komponenten“?
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 Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-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
- RSC und RCC verstehen
- Datenabruf in RSC
- Interaktivität mit RCC
- Kompositionsmuster für Server- und Client-Komponenten