Server-Side Rendering (SSR)

Server-Side Rendering (SSR) ist eine Technik, bei der HTML nicht im Browser generiert wird (wie bei klassischen React Apps), sondern auf dem Server. Der Server führt die React-Komponenten aus, generiert fertiges HTML und sendet es an den Client. Der Browser zeigt sofort Inhalte an, ohne erst JavaScript laden und ausführen zu müssen. Danach "hydratisiert" React die Seite und macht sie interaktiv.

Die Vorteile von SSR sind erheblich: Besseres SEO (Crawler sehen vollständiges HTML), schnellere First Contentful Paint (Nutzer sehen sofort Inhalt), bessere Performance auf langsamen Geräten. Der Nachteil: Höhere Server-Komplexität und -Last. Next.js macht SSR einfach durch getServerSideProps - die Seite wird bei jeder Anfrage frisch auf dem Server gerendert.

SSR ist besonders wertvoll für Content-Heavy Sites (Blogs, E-Commerce, Marketing-Sites), wo SEO kritisch ist. Für hochinteraktive Apps (Dashboards) ist Client-Side Rendering oft ausreichend. Next.js bietet Hybrid-Rendering - manche Seiten SSR, manche Client-Side, manche statisch. Diese Flexibilität ist einer der Hauptgründe für die Popularität von Next.js.

Seit dem App Router (Next.js 13+) hat sich das Bild gewandelt: Das ältere getServerSideProps gehört zum Pages Router, während im App Router React Server Components (RSC) den Standard bilden. Diese Komponenten laufen ausschließlich auf dem Server, senden fertiges HTML sowie eine kompakte Beschreibung an den Client und benötigen für sich genommen kein JavaScript im Browser - nur explizit als Client Components markierte Teile werden hydratisiert. Über Streaming und Suspense kann der Server die Seite zudem stückweise ausliefern: Das Grundgerüst erscheint sofort, langsamere Datenbereiche werden nachgeschoben, sobald sie fertig sind.

SSR ist jedoch kein Allheilmittel. Der Preis ist eine höhere Time to First Byte, weil der Server erst rendern muss, sowie die Hydration - das nachträgliche Verdrahten des gelieferten HTML mit JavaScript, das bei zu vielen Client-Komponenten selbst zum Flaschenhals wird. Gefürchtet sind Hydration Mismatches, wenn server- und clientseitig gerendertes Markup abweicht (etwa durch Zufallswerte oder Datumsformate). Wichtig ist die Abgrenzung der Strategien: SSR rendert bei jeder Anfrage neu, SSG (Static Site Generation) einmal beim Build, ISR (Incremental Static Regeneration) baut statische Seiten im Hintergrund periodisch neu, und CSR (Client-Side Rendering) überlässt alles dem Browser. Für Marketing-Seiten mit stabilem Inhalt ist SSG meist besser als SSR - schneller, günstiger und CDN-freundlich.