React Server Components (RSC) werden ausschließlich auf dem Server gerendert — ihr JavaScript wird nie zum Browser gesendet. Im App Router ist jede Komponente standardmäßig eine Server Component; Sie entscheiden sich explizit für Client-Verhalten.
db ;
() {
users = db..();
(
);
}
Server Components können asynchron sein, Daten direkt awaiten und auf reine Server-Ressourcen (Datenbank, Dateisystem, Secrets) zugreifen — weil sie auf dem Server ausgeführt werden. Keine API-Schicht ist erforderlich, um Daten abzurufen, und Secrets erreichen nie den Client.
Der Browser erhält das gerenderter HTML/UI, nicht den Code der Komponente oder ihre Abhängigkeiten. Eine Server Component, die eine schwere Markdown- oder Date-Bibliothek verwendet, sendet keine dieser Bibliothek zum Browser — reduziert die Bundle-Größe drastisch.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
Keine Interaktivität, State, Effects oder Browser-APIs — diese erfordern eine Client Component.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
Das Muster: Server Components verarbeiten Daten/Struktur; binden Sie Client Components nur dort ein, wo Interaktivität erforderlich ist ("islands").
Server Components sind das definierende Merkmal des App Routers.
Sie reduzieren die Client-Bundle-Größe (weniger JS zum Herunterladen/Parsen), ermöglichen direkten, sicheren serverseitigen Datenzugriff ohne API und verbessern die Leistung und SEO.
Zu wissen, dass sie Standard sind — und was zwingt eine Komponente, eine Client Component zu sein — ist grundlegend für das effiziente Strukturieren von App Router-Apps.