React Server Components (RSC)

React Server Components sind eine 2023 von Meta eingefuehrte Architektur, die grundlegend aendert, wie React-Anwendungen aufgebaut werden. Anders als klassische React-Komponenten laufen Server Components ausschliesslich auf dem Server, rendern dort ihr HTML, und senden nur das Ergebnis zum Client -- ohne JavaScript-Code.

Der Hauptvorteil ist Bundle-Size: Bibliotheken wie markdown-it (200 KB), syntax-highlighter (500 KB) oder grosse Datenbank-Clients werden nie zum Browser gesendet, weil sie in Server Components isoliert sind. Typische Next.js-16-Apps haben dadurch 50-80 % kleinere JavaScript-Bundles als aequivalente React-SPAs.

Der zweite grosse Vorteil: Datenzugriff ohne API-Layer. Server Components koennen direkt SQL-Queries, Filesystem-Zugriffe oder Third-Party-APIs ausfuehren -- kein Round-Trip zum Browser und zurueck. Ein Blog-Artikel-Renderer kann z. B. per Prisma direkt die Datenbank abfragen, ohne dass eine REST-API dazwischen haengt.

Die Unterscheidung zu Client Components ist einfach: Client Components werden mit der Direktive "use client" markiert und laufen im Browser (fuer Interaktivitaet wie onClick, useState, useEffect). Alles ohne diese Direktive ist per Default ein Server Component.

Fuer SEO und AI-Crawling ist RSC ein Game-Changer: Der komplette Content liegt im ersten HTTP-Response als HTML vor, ohne Hydration-Waiting. Perplexity, ChatGPT und ClaudeBot koennen die Seite sofort parsen. Gleichzeitig bleibt die Interaktivitaet modernster SPAs erhalten, wo sie gebraucht wird.

Alunah setzt RSC seit Next.js 13 produktiv ein. Ein typisches Alunah-Kundenprojekt hat eine Bundle-Size von 50-90 KB JavaScript -- gegenueber 300-500 KB bei aequivalenten WordPress-Setups mit klassischen React-Plugins. Das direkte Resultat: deutlich bessere Core Web Vitals und schnellere Indexierung durch Suchmaschinen.