Webseitenoptimierung Server Side Rendering: Der Turbo für Websites

Anbieter zum Thema

DAXTEN GmbH

dtm Datentechnik Moll GmbH

EPS Rechenzentrum Infrastruktur GmbH

Website-Geschwindigkeit ist nicht nur gut für Besucher: Auch Google belohnt schnelle Websites mit einem hohen Pagerank. Server Side Rendering ist eine hervorragende Möglichkeit, schnelle Websites zu generieren.

Websites sind in den letzten zwei Dekaden immer größer und umfangreicher geworden. Das dahinterliegende Content-Management-System lädt eine Vielzahl an Bibliotheken, Skripte und Code hoch. Das Problem: Google – und als Marktführer ist Google derzeit die wichtigste Suchmaschine – stuft Websites auch nach ihrer Geschwindigkeit ein. Dazu bedient es sich der hauseigenen Lighthouse-Routinen, die Web-Entwickler etwa in den Chrome Developer Tools oder auf der Pagespeed-Website selbst testen können. Schnelle Seiten werden besser gerankt – und ein gutes Ranking ist ein Garant für hohe Besucherzahlen und damit für den Umsatz der Website.

Was ist Server Side Rendering?

Leider sind moderne Content-Management-Systeme – egal ob WordPress, Typo3 oder auch selbst programmierte Anwendungen – oft sehr überfrachtet: Hier ein CSS, dort ein Skript und dann werden oft Inhalte von anderen Websites – etwa Instagram oder Google – nachgeladen. Das verzögert das Rendering im Browser, also die Zeit bis zur Interaktivität auf der Client-Seite. Die Folge ist, dass sich der Seitenaufbau und sich damit das Ranking verschlechtert. Als Lösung kann Server Side Rendering dienen.

Beim Server Side Rendering wird die Website nicht beim Besuch aus dem PHP- und JavaScript-Code sowie Datenbankanfragen im Browser des Besuchers gerendert. Sondern der Server rendert und liefert den Inhalt als HTML-Seite aus. Dadurch verhält sich die Seite ein wenig wie die Internetseiten im Web 1.0 als CSS- und Skript-Arien noch in weiter Ferne lagen. Dadurch werden die Seiten rasend schnell.

Was SSR von Caching oder Static Site Generator unterscheidet

Wer sich bereits mit Content Management Systemen beschäftigt hat, weiß: Es gibt natürlich auch Mittel und Wege, WordPress und Co. deutlich zu beschleunigen. Das Stichwort lautet „Cache“ – und auch hierbei werden Seiten als statisches HTML generiert und ausgeliefert. Der Unterschied liegt im Overhead. Bei einem Cache wird eine vorhandene PHP-Website als HTML-Skeleton zwischengespeichert und ausgeliefert. Der JavaScript wird aber nach wie vor im Browser ausgeführt und verändert gegebenenfalls die Seite oder bremst den Ladevorgang. Zudem muss das CMS oder ein Cache-Proxy wie Nginx validieren. Bei neuen Inhalten muss der Cache trotzdem neu aufgebaut werden.

Eine weitere Alternative wären Static Site Generatoren, die nach einem ähnlichen Prinzip funktionieren: Die Inhalte werden allerdings ohne Umweg über einen Cache als HTML auf dem Server abgelegt. Anders als beim Cache ist hier das CMS nicht mehr involviert. Das Problem hier: Wird der Content geändert, muss die statische Seite neu angelegt werden. Dadurch eignen sich Static Site Generatoren wie Hugo nicht gut für Seiten, auf denen sich der Content häufig ändert. Für dynamische Sites wie etwa Webshops oder Community-Seiten ist diese Technik nicht geeignet, das Caching nur bedingt und unter der Prämisse, gute Einstellungen zu finden.

Server-Side-Rendering hingegen schafft den Spagat zwischen Dynamik und Statik: Statt eines HTML-Skeletons mit JS-Elementen oder einer vollständigen Seite wird die Website hier vollständig bei jeder Anfrage eines Browsers auf dem Server gerendert. Dadurch entfällt ein großer Teil der langsamen Verarbeitung auf Seiten des Browsers, JavaScript-Elemente wie dynamische Seiten- und Elementwechsel werden hier zwar ebenfalls im Browser ausgeführt; die Seite ist aber aus Sicht von Google und Co. zu diesem Zeitpunkt bereits „fertig“. Durch diese „Faster time-to-content“ wirkt eine Website für User und Suchmaschinen schnell, was zu einer deutlichen Verbesserung im SEO und auf Nutzerseite führt.

Wie funktioniert Server Side Rendering?

Um Server Side Rendering zu realisieren, gibt es verschiedene Methoden. Die großen Java-Frameworks wie Angular, Next.js, Node.js, Vue.js oder auch Meta-Frameworks wie Astro unterstützen die Technik längst.

Der Prozess ist beim Server Side Rendering im Prinzip immer der gleiche: Beim Client-Side-Rendering werden zunächst Java und Daten geladen. Außerdem werden die Komponenten gerendert, bis die Seite interaktiv ist. Beim Server Side Rendering hingegen eine HTML-Seite mit allen Informationen und Datenbankabfragen bereits auf dem Server generiert, das JavaScript geladen und anschließend mit der sogenannten Hydration im Browser des Nutzers ausgeführt, was die Website deutlich beschleunigt.

Nachteile des Server Side Renderings

Auch beim Server Side Rendering können gewisse Nachteile gefunden werden. Es gibt zum Beispiel technisch bedingt – die Seite wird auf dem Server erstellt – Schwierigkeiten mit unterschiedlichen Technologien für unterschiedliche Browser. Das Setup einer Website mit Server Side Rendering kann deutlich komplexer sein als mit einem clientgerenderten System: Beim Server Side Rendering werden etwa das CMS und Website physisch getrennt und sogar auf unterschiedlichen Servern ausgeführt, um die Sicherheit zu erhöhen.

Der wohl wichtigste Punkt ist aber natürlich die Serverlast: Einer der größten Vorteile der klassischen Methode ist sicherlich, dass der Browser des Anwenders das Rendering übernimmt und dementsprechend wenig Last auf dem Server erzeugt. Naturgemäß ist das Server Side Rendering hier deutlich anspruchsvoller, gerade im Hinblick auf die CPU-Last. Es gilt daher, eine schnell skalierbare Lösung – etwa auf Cloud-Servern – aufzusetzen, um Lastspitzen effektiv abzufangen.

Praktisch: Headless-CMS plus SSR

Doch zurück zum Content Management System, das typischerweise aus Frontend und Backend besteht. Auch hier ist Server Side Rendering problemlos möglich: Das CMS muss dazu als sogenanntes Headless-CMS betrieben werden, das nur aus dem Backend besteht. Das Frontend wird von einem Framework übernommen, das Server Side Rendering unterstützt. Der Vorteil einer solchen Lösung ist, dass gewohnte Systeme und bestehende Websites – etwa auf WordPress-Basis mittels REST-API – weiterhin verwendet werden können.

Ausblick auf Teil 2

Im zweiten Teil zum Thema Server Side Rendering geht der Autor auf Besonderheiten im Zusammenhang mit dem beliebten Content-Management-System WordPress ein. Denn auch hier gibt es Möglichkeiten für einen spürbaren Performance-Gewinn. "Server Side Rendering: So geht’s mit WordPress", nachzulesen hier ab kommenden Montag, 30. September 2024 um 12:30 Uhr.

WordPress und SSR

Server Side Rendering: So geht’s mit WordPress

(ID:50136318)