Was ist ein Rendering?

Rendering bezeichnet den Prozess, durch den ein Browser HTML, CSS und JavaScript in das visuelle Bild umwandelt, das du auf dem Bildschirm siehst. Vom Quellcode bis zum fertigen Bild läuft dieser Prozess jedes Mal, wenn eine Website geladen wird.

Concret: Dein Browser empfängt HTML-Code vom Server. Er parst diesen Code, baut eine interne Baumstruktur daraus (den DOM, das Document Object Model), kombiniert das mit CSS-Stilen, berechnet Positionen und Größen aller Elemente und malt schließlich Pixel auf den Bildschirm. Das ist Rendering.

Die verschiedenen Rendering-Strategien

Im modernen Webentwicklung gibt es verschiedene Ansätze, wo und wann dieses Rendering stattfindet. Das hat direkte Auswirkungen auf Ladegeschwindigkeit, SEO und Nutzererlebnis.

Client-Side Rendering (CSR) bedeutet: Der Server schickt minimal HTML und viel JavaScript. Der Browser führt das JavaScript aus und generiert erst dann den sichtbaren Inhalt. Single Page Applications wie React-Apps verwenden häufig diesen Ansatz. Der Vorteil ist eine app-ähnliche Nutzererfahrung nach dem initialen Laden. Der Nachteil: die erste Seite lädt langsamer, weil JavaScript erst ausgeführt werden muss, bevor etwas zu sehen ist.

Server-Side Rendering (SSR) bedeutet: Der Server generiert fertiges HTML und schickt es zum Browser. Der Browser kann sofort etwas anzeigen, ohne JavaScript auszuführen. Das beschleunigt die wahrgenommene Ladezeit und verbessert die Indexierbarkeit durch Suchmaschinen.

Static Site Generation (SSG) geht noch weiter: Seiten werden einmalig beim Build-Prozess gerendert und als fertige HTML-Dateien gespeichert. Jeder Aufruf liefert dieselbe statische Datei aus. Das ist extrem schnell, aber nur für Inhalte geeignet, die sich selten ändern.

Hydration ist ein Begriff, der im Zusammenhang mit SSR und modernen Frameworks auftaucht. Er beschreibt den Prozess, bei dem ein server-seitig gerendertes HTML im Browser nachträglich mit JavaScript “belebt” wird, sodass interaktive Elemente funktionieren.

Die Wahl der richtigen Rendering-Strategie hängt vom Projekttyp ab. Eine Marketing-Website profitiert von SSG. Ein komplexes Dashboard braucht vielleicht CSR. Ein E-Commerce-Shop mit aktuellen Lagerbeständen eignet sich für SSR. Wir beraten dazu im Rahmen unserer Webentwicklungsleistungen. Für ein Gespräch: Termin buchen.