Was ist serverseitiges Rendering (SSR)?

Serverseitiges Rendering (SSR) ist der Prozess, bei dem eine Webseite auf dem Server als Antwort auf eine Anfrage des Clients generiert wird. Anstatt dem Client ein leeres HTML-Dokument und ein JavaScript-Bundle für die nachträgliche Renderung im Browser zu senden, erstellt der Server ein vollständiges HTML-Dokument mit bereits eingefügtem Inhalt.

Vorteile von SSR:

• SEO-Optimierung: Suchmaschinenroboter indexieren den Inhalt leichter, da ihnen bereits fertiges HTML bereitgestellt wird, anstatt dynamisch generiertes JavaScript.
• Erste Renderzeit (FCP): Der Nutzer sieht den Seiteninhalt schneller, da der Server bereits ein fertiges HTML bereitgestellt hat, das der Browser sofort anzeigen kann.
• Leistung auf schwachen Geräten: Weniger ressourcenintensiv für das Client-Gerät, da die meiste Arbeit bei der Generierung der Seite auf dem Server erfolgt.
• Verbesserte Interaktion in sozialen Netzwerken: Beim Teilen erhalten soziale Netzwerke fertigen Inhalt für die Vorschau, anstatt eine leere Seite.

Nachteile von SSR:

• Erhöhte Serverbelastung: Der Server muss Anfragen zum Rendern jeder Seite verarbeiten, was ressourcenintensiv sein kann.
• Reduzierte Interaktivität bis zur Hydratation: Nach Erhalt des HTML benötigt der Browser Zeit, um "zu hydrieren" — die JavaScript-Logik an das bereits dargestellte DOM zu binden. Bis zum Abschluss der Hydratation kann die Seite teilweise oder vollständig nicht interaktiv sein.
• Komplexität in der Entwicklung: Erfordert eine spezifische Architektur der Anwendung und spezielle Frameworks (z.B. Next.js für React, Nuxt.js für Vue.js, Angular Universal für Angular).

Bei SSR sendet der Client eine Anfrage an den Server, der sie verarbeitet, eine HTML-Zeichenkette mit dem fertigen Inhalt und der Struktur generiert und sie an den Client zurücksendet. Der Browser zeigt das empfangene HTML an und lädt anschließend das JavaScript des Clients, um Interaktivität hinzuzufügen (Hydrationsprozess).