Wenn du eine Website aufrufst, müssen ihre Inhalte zunächst so aufbereitet werden, dass dein Browser sie darstellen kann. Dieser Vorgang wird als Rendering bezeichnet. Wo dieses Rendering stattfindet, beeinflusst unter anderem, wie schnell Inhalte sichtbar werden, wie Daten verarbeitet werden und wie die Website aufgebaut ist.
Eine mögliche Methode ist Server-Side-Rendering, kurz SSR. Gerade für E-Commerce-Websites kann die Rendering-Strategie relevant sein, weil Produktseiten gleichzeitig schnell, aktuell, interaktiv und für Suchmaschinen gut zugänglich sein sollen.
Was ist serverseitiges Rendering?
Serverseitiges Rendering oder Server-Side-Rendering (SSR) bedeutet, dass der Server eine Webseite als HTML erzeugt, bevor sie an deinen Browser gesendet wird. Der Browser erhält dadurch bereits darstellbare Inhalte. JavaScript kann anschließend zusätzliche Funktionen und Interaktionen wie Filter, Menüs oder andere dynamische Elemente aktivieren.
Wie funktioniert Server-Side-Rendering?
Bei SSR läuft der Seitenaufruf vereinfacht folgendermaßen ab:
- Dein Browser fordert eine bestimmte URL beim Server an.
- Der Server ruft die benötigten Daten ab, beispielsweise Produktinformationen aus einer Datenbank oder über eine API.
- Aus diesen Daten erzeugt der Server das HTML für die angeforderte Seite.
- Der Server sendet das fertige HTML an den Browser.
- Der Browser stellt die Inhalte dar und lädt bei Bedarf JavaScript für interaktive Funktionen.
Bei modernen Webanwendungen folgt häufig die sogenannte Hydration. Dabei verbindet das im Browser ausgeführte JavaScript die bereits vorhandenen HTML-Inhalte mit den interaktiven Funktionen der Anwendung. Die Seite muss also nicht vollständig neu aufgebaut werden.
Was ist der Unterschied zwischen SSR, CSR und SSG?
Neben Server-Side-Rendering begegnen dir vor allem Client-Side-Rendering (CSR) und Static-Site-Generation (SSG).
| Methode | Wo entsteht das HTML? | Typischer Einsatz |
|---|---|---|
| SSR | Auf dem Server bei einer Anfrage | Dynamische, öffentlich zugängliche Seiten |
| CSR | Im Browser der Nutzer:innen | Stark interaktive Webanwendungen |
| SSG | Vorab während des Build-Prozesses | Inhalte, die sich selten verändern |
| Hybrid Rendering | Kombination mehrerer Methoden | Komplexe Websites und Onlineshops |
Beim Client-Side-Rendering sendet der Server zunächst häufig nur ein Grundgerüst und JavaScript an den Browser. Erst dort entstehen die eigentlichen Seiteninhalte. Das ermöglicht sehr dynamische Anwendungen, verlagert aber mehr Arbeit auf das Endgerät.
Bei Static-Site-Generation werden Seiten dagegen schon im Voraus erstellt. Bei einem Aufruf muss kein neues HTML erzeugt werden. Für Inhalte, die für alle Besucher:innen gleich bleiben, kann das besonders effizient sein.
In der Praxis musst du dich nicht zwangsläufig für genau eine Methode entscheiden. Moderne Websites kombinieren häufig mehrere Rendering-Strategien.
Welche Vorteile hat serverseitiges Rendering?
SSR kann vor allem dann Vorteile bieten, wenn wichtige Inhalte direkt beim ersten Seitenaufruf verfügbar sein sollen.
Inhalte können früh angezeigt werden
Da dein Browser bereits HTML erhält, muss er nicht zunächst umfangreiches JavaScript ausführen, um zentrale Inhalte zu erstellen. Das kann den wahrgenommenen Seitenaufbau verbessern. Für die Website Performance ist SSR allein allerdings keine Garantie: Auch die Server-Antwortzeit, Datenabfragen, Bilder und JavaScript-Dateien beeinflussen die Geschwindigkeit.
Relevante Inhalte stehen direkt im HTML
Produktnamen, Beschreibungen, Überschriften oder andere zentrale Inhalte können bereits in der ersten Serverantwort vorhanden sein. Das erleichtert unterschiedlichen Clients und Crawlern den Zugriff auf diese Informationen.
Für die technische SEO kann das hilfreich sein. SSR ist allerdings keine Voraussetzung dafür, dass Google eine Website indexieren kann. Google kann JavaScript ausführen und clientseitig erzeugte Inhalte rendern. Entscheidend bleibt, dass Suchmaschinen deine Inhalte zuverlässig crawlen, rendern und indexieren können.
Der Browser muss weniger Aufbauarbeit übernehmen
Insbesondere auf leistungsschwächeren Geräten kann es vorteilhaft sein, wenn zentrale Inhalte bereits auf dem Server erstellt wurden. Wie groß dieser Effekt ausfällt, hängt jedoch stark von der jeweiligen Anwendung und der anschließenden JavaScript-Ausführung ab.
Welche Nachteile hat Server-Side-Rendering?
Die zusätzlichen Aufgaben auf dem Server bringen auch Herausforderungen mit sich.
Höhere Serverlast
Bei klassischem SSR wird eine Seite für Anfragen dynamisch erzeugt. Das benötigt Rechenleistung und kann bei vielen gleichzeitigen Zugriffen die Infrastruktur stärker beanspruchen als eine vollständig statische Auslieferung.
Caching kann diese Belastung reduzieren. Dabei werden bereits erzeugte Inhalte oder abgefragte Daten zwischengespeichert und bei späteren Anfragen wiederverwendet.
Langsame Datenabfragen können den Seitenaufbau verzögern
Muss der Server vor der HTML-Erzeugung mehrere APIs oder Datenbanken abfragen, können langsame Abhängigkeiten die Antwort verzögern. Eine gute SSR-Architektur berücksichtigt deshalb unter anderem effiziente Datenabfragen und sinnvolle Caching-Strategien.
Die technische Architektur wird komplexer
Server- und Browser-Code müssen sauber zusammenspielen. Stimmen beispielsweise serverseitig erzeugtes HTML und das anschließend im Browser berechnete Ergebnis nicht überein, können sogenannte Hydration-Fehler entstehen. Für einfache Websites ist eine umfangreiche SSR-Architektur deshalb nicht automatisch sinnvoll.
Wann ist Server-Side-Rendering sinnvoll?
SSR kann sich besonders eignen, wenn deine Website dynamische Inhalte bereitstellt, die schon beim ersten Seitenaufruf sichtbar sein sollen. Auch bei öffentlich zugänglichen Produkt- und Kategorieseiten kann serverseitiges Rendering eine passende Grundlage sein.
Weniger entscheidend ist SSR häufig bei rein internen Anwendungen, deren Inhalte nicht über Suchmaschinen gefunden werden müssen. Für weitgehend unveränderliche Seiten kann wiederum statische Generierung effizienter sein.
Die passende Rendering-Methode hängt deshalb nicht von einer einzelnen Kennzahl ab. In vielen modernen E-Commerce-Projekten ist eine Kombination aus SSR, statischen Inhalten, Caching und clientseitiger Interaktivität die sinnvollere Architektur.
Fazit: SSR ist eine von mehreren Rendering-Strategien
Serverseitiges Rendering erzeugt HTML auf dem Server und sendet bereits darstellbare Inhalte an den Browser. Das kann Vorteile für den initialen Seitenaufbau und die Bereitstellung wichtiger Inhalte bringen und ist besonders für dynamische, öffentlich zugängliche Seiten interessant.
SSR ist aber weder automatisch schneller noch zwingend notwendig für SEO. Serverlast, Datenabfragen, Caching und Hydration müssen ebenfalls berücksichtigt werden. Gerade im E-Commerce lohnt es sich deshalb, SSR nicht isoliert zu betrachten, sondern die Rendering-Methode passend zu den Anforderungen einzelner Seiten und Funktionen auszuwählen.
