Was ist React Server Components (RSC)?

React Server Components sind eine Rendering-Primitive von React, bei der Komponenten ausschließlich auf dem Server laufen und kein JavaScript zum Client schicken. Sie erzeugen serialisierte UI, die zum Browser gestreamt und mit klassischen Client-Komponenten für Interaktivität verschränkt wird. Für composable-commerce-Storefronts ist RSC der wirkungsvollste React-Shift seit Hooks.

Definition

In RSC-fähigen Frameworks wie Next.js App Router oder experimentellen SvelteKit- und Remix-Varianten werden Komponenten als Server- oder Client-Komponente klassifiziert. Server-Komponenten greifen direkt auf Datenbanken, Commerce-APIs oder ein content-management-system-cms über fs oder fetch zu, geben einen serialisierten React-Tree zurück und werden komplett aus dem Client-Bundle getreesheakt. Client-Komponenten, markiert mit use client, bleiben interaktiv und werden als First-Party-JS ausgeliefert. Das Framework komponiert beides per streaming-ssr und schickt statische Teile sofort, interaktive Islands danach. Das passt natürlich zu Edge Rendering und modernen Cache-Layer-Primitiven.

Warum es zählt

Der größte Kostenfaktor moderner React-Storefronts ist die Größe des Client-Bundles und die resultierende Hydration-Arbeit - beides Hauptursachen für schlechte INP. RSC verlagert Datenholen, Templating und schwere Formatierungs-Libraries auf den Server und lässt nur echte Interaktivität im Client. PDP- und PLP-Bundles schrumpfen häufig um 40 bis 70 Prozent. Weil Server-Komponenten HTML streamen, verbessert sich auch LCP. RSC vereinfacht zudem den Datenzugriff: Statt useEffect awaiten Komponenten Daten direkt im Render, was Client-Waterfalls eliminiert.

Anwendungsfälle

composable-commerce-Teams auf Next.js verschieben Produktlisten, Kategorietexte, Faceting und SEO-Content in Server-Komponenten und behalten Warenkorb, Variantenwahl, Mini-PDP-Module und personalisierte Blöcke als Client-Komponenten. Server-Komponenten colokieren Aufrufe an eine storefront-api, einen Search-Service, die recommendation-engine und das CMS und profitieren von Request-Memoization im Cache-Layer. Edge Rendering auf Vercel Edge oder Cloudflare Workers erlaubt es, RSC-Trees nahe am Nutzer zu erzeugen. In Kombination mit islands-architecture-Denken liefert RSC das sauberste Modell, um First-Party-JS zu reduzieren und reiche Interaktivität nur dort zu erhalten, wo sie nötig ist.

Verwandt

Mehr dazu: Composable Headless Frontend · Performance and Core Web Vitals.