Skip to main content
zurück zur übersicht
Next.jsReactServer Components

Next.js Server Components: Der komplette Guide für 2026

Lerne, wie React Server Components in Next.js funktionieren, wann du sie einsetzen solltest und wie du Client- und Server-Komponenten optimal kombinierst.

Marcel Wiskow

Marcel Wiskow

28. Februar 2026

Next.js Server Components: Der komplette Guide für 2026

Was sind Server Components?

React Server Components (RSC) sind eine grundlegend neue Art, React-Anwendungen zu bauen. Im Gegensatz zu klassischen Client Components werden sie ausschließlich auf dem Server gerendert und senden kein JavaScript an den Browser.

Das bedeutet: schnellere Ladezeiten, kleinere Bundle-Größen und direkter Zugriff auf Backend-Ressourcen wie Datenbanken und Dateisysteme.

Server vs. Client Components

In Next.js ist jede Komponente standardmäßig eine Server Component. Erst durch die "use client" Direktive wird eine Komponente zur Client Component:

// Server Component (Standard)
export default async function BlogPage() {
  const posts = await db.posts.findMany();
  return <PostList posts={posts} />;
}
// Client Component
"use client";
 
import { useState } from "react";
 
export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>❤️</button>;
}

Wann welche Variante?

Use CaseServer ComponentClient Component
Daten fetchen✅❌
Backend-Zugriff (DB, Filesystem)✅❌
Interaktivität (onClick, onChange)❌✅
Browser APIs (localStorage, window)❌✅
State Management (useState)❌✅
SEO-kritischer Content✅✅ (mit SSR)

Das Composition Pattern

Die wahre Stärke zeigt sich in der Kombination. Server Components können Client Components als Children empfangen:

// Server Component
import ClientWrapper from "./client-wrapper";
 
export default async function Page() {
  const data = await fetchData();
 
  return (
    <ClientWrapper>
      <ServerRenderedContent data={data} />
    </ClientWrapper>
  );
}

Dieses Pattern nutzen wir auch bei thenotperfect: Die MainLayout-Komponente ist ein Client Component (für Navigation und Interaktivität), aber der Seiteninhalt wird serverseitig gerendert und als children übergeben.

Performance-Vorteile

Server Components bieten erhebliche Performance-Vorteile:

  • Zero Bundle Size: Server Components senden kein JavaScript an den Client
  • Streaming: Inhalte werden progressiv geladen
  • Caching: Gerenderte Ergebnisse können auf dem Server gecacht werden
  • Direkter Datenzugriff: Kein Netzwerk-Roundtrip für API-Calls nötig

Best Practices

  1. Starte immer mit Server Components und füge "use client" nur hinzu, wenn du Interaktivität brauchst
  2. Halte Client Components klein — extrahiere interaktive Teile in eigene Komponenten
  3. Nutze das Composition Pattern für die Kombination von Server- und Client-Logik
  4. Vermeide unnötige Client-Boundaries — jede "use client" Direktive zieht den gesamten Unterbaum auf den Client

Fazit

Server Components sind kein Hype, sondern eine fundamentale Verbesserung der React-Architektur. Sie ermöglichen bessere Performance, einfacheren Code und eine klarere Trennung von Verantwortlichkeiten. In Next.js sind sie seit dem App Router der Standard — und das aus gutem Grund.

alle artikel