Verständnis der Server/Client-Grenze
React Server Components (RSC) ermöglichen es, Komponenten auf dem Server auszuführen, wodurch die Größe der Bundle reduziert und die Leistung verbessert wird. Doch das Verständnis dafür, wann Server- vs. Client-Komponenten verwendet werden sollten, ist entscheidend.
Architekturmuster
1. Datenabruf auf Komponentenebene
Server-Komponenten können direkt auf Datenbanken, Dateisysteme und andere Server-Ressourcen zugreifen, ohne API-Endpunkte.
async function Produktliste() {
const produkter = await db.produkt.findMany({ where: { veröffentlicht: true } });
return (
<div className="grid grid-cols-3 gap-4">
{produkter.map(p => <Produktkarte key={p.id} produkt={p} />)}
</div>
);
}2. Server-Aktionen für Mutationen
Server-Aktionen ermöglichen Ihnen, asynchrone Funktionen auf dem Server zu schreiben, die von Client-Komponenten aufgerufen werden können.
"use server";
export async function erstelleProdukt(formDaten) {
const produkt = await db.produkt.create({ data: { name: formDaten.get("name") } });
revalidatePath("/produkte");
return { success: true, produkt };
}Häufige Falle
- Man kann Funktionen als Props von Server- zu Client-Komponenten übergeben
- Man kann useState oder useEffect in Server-Komponenten nicht verwenden
- Drücken Sie "use client" so tief wie möglich in der Komponentenstruktur ein
- Server-Komponenten können keine Benutzereingaben verarbeiten – verwenden Sie Client-Komponenten dafür
Leistungseinfluss
In unserem Produktionsanwendungsfall reduzierte sich die JavaScript-Bundle-Größe um 35% und die Time to Interactive um 40%. Der Schlüsselinsight: Server-Komponenten sind nicht nur um Leistung zu tun – sie sind auch um architektonische Klarheit.
Zusammenfassung
RSC ist ein Paradigmenwechsel, nicht nur eine Funktion. Denken Sie an die Server/Client-Grenze bereits in Ihren Architekturentscheidungen.
