WordPress und SSR Server Side Rendering: So geht’s mit WordPress

Viele bestehende Websites basieren auf WordPress. Das Content-Management-System hat viele Vorteile, Geschwindigkeit zählt aber meist nicht dazu. Dank Server Side Rendering können aber auch bestehende WordPress-Projekte einen großen Geschwindigkeits-Boost erhalten.

Wer Websites entwickelt, kam lange Zeit kaum an WordPress vorbei. Zwar gibt es inzwischen zahlreiche, schnellere Alternativen – etwa Static Site CMS wie Hugo oder Publishing-Plattformen wie Ghost. Doch WordPress war lange Jahre der Standard, nicht nur für Blogs, sondern auch für Business-Websites, Unternehmens-Auftritte und Webshops. Genau deshalb dürften Web-Entwickler vor allem bei Altprojekten auch häufiger mit WordPress zu tun bekommen – auch wenn sie es selbst vielleicht nicht mehr aktiv einsetzen würden.

Webseitenoptimierung

Server Side Rendering: Der Turbo für Websites

Das große Problem an WordPress ist jedoch der technische Overhead: Im Direktvergleich mit moderne Website-Systeme, die auf statische Seiten oder Server Side Rendering setzen, kann das CMS performanceseitig kaum mithalten. Das liegt daran, dass bei jedem Seitenaufruf auch das CMS agieren muss, um Inhalte – ob statisch per Cache oder dynamisch per CMS – auszuliefern. Caching-Methoden, etwa mit Plugins wie WP Super Cache, mit dem Nginx-FastCGI-Cache oder Content-Delivery-Systemen wie Cloudflare lindern das Problem, können es aber nicht vollständig beheben.

WordPress kann Server Side Rendering

Was hingegen hilft, ist in WordPress das Server Side Rendering zu aktivieren: Dadurch wird das Content Management System aufgetrennt in das eigentliche WordPress-System – und einen separaten Ordner oder sogar Server, in dem die Seiten serverseitig gerendert werden. Das ist bei WordPress problemlos möglich: WordPress besitzt mit der leistungsfähigen REST-API seit Version 4.7 eine Schnittstelle, mit deren Hilfe das CMS als Headless-CMS betrieben werden kann.

Für Entwickler, die sich mit gegebenenfalls älteren Projekten auf WordPress-Basis beschäftigen, ist das eine gute Nachricht: Die REST-API erlaubt die Verknüpfung der Vorteile von WordPress wie seine weite Verbreitung, seine hohe Usability und seine hohe Flexibilität mit den Vorteilen moderner Frontend-Technologien. Zum Beispiel dem Server Side Rendering oder auch für Apps, die via WordPress gepflegt werden. Durch sie wird es möglich, Daten aus WordPress im JSON-Format auszulesen und an anderer Stelle zu verwenden. Zusätzlich ist es sinnvoll, mittels Plugin GraphQL für WordPress zu aktivieren.

Server-Side-Rendering mit WordPress und Astro

Eine der derzeit leistungsfähigsten Lösungen für Server Side Rendering ist das Meta-Framework Astro für Content-Driven-Websites. Es ermöglicht nicht nur das Server Side Rendering von Frontend-Seiten, inklusive aller Performance-Vorteile statischer Seiten in Googles Lighthouse-Messung.

Astro lässt sich problemlos mit einem Headless WordPress verbinden. Dazu muss in Astro zunächst ein Projekt erstellt werden – das benötigt seinerseits nicht mehr als Node.js auf dem Server, einen Text-Editor und ein Terminal. Ist Astro eingerichtet, kann es als Frontend für ein bestehendes WordPress verwendet werden und bringt alle Vorteile des Server-Side-Renderings mit.

Zunächst muss Astro via REST-API mit WordPress verbunden werden: Dazu ist es nötig, ein Astro-Projekt zu erstellen. Dieses wiederum nimmt via [Website-URL]/wp-json/wp/v2/ Kontakt zu WordPress auf. Die WordPress-REST-API benötigt standardmäßig keine Zugangsdaten, was den Komfort deutlich erhöht. Für gesteigerte Sicherheit kann es sinnvoll sein, die API mit einer Authentifizierung abzusichern.

Anschließend muss Astro die Daten der REST-API nur noch abrufen. Astro benötigt nur einen einzelnen Befehl im Code, um die Daten der REST-API zu ziehen, in diesem Fall die der Posts:

Weitere Konstanten sind etwa Pages, Categories oder Comments, die entsprechend über einen angepassten String – etwa https://[Webste-URL]/wp-json/wp/v2/comments – in Astro hineingezogen werden können. Das klappt im Rahmen der WordPress-Standards. Custom Post Types müssen jedoch separat in der REST-API von WordPress registriertwerden.

Für die Ausgabe ist Astro in der einfachsten Form ebenfalls zuständig: Mit dem Ausgabe-Code

generiert Astro eine Artikelliste aller Posts in WordPress. Nach diesem Schema lässt sich die Seitenstruktur von WordPress nach und nach in Astro nachbauen. Gleichzeitig erlaubt Astro auch die automatische Generierung der Seiten via WordPress.

Das Frontend ist Astros Angelegenheit

Da WordPress als Headless-CMS in diesem Setup nur noch für die Content-Verwaltung, nicht jedoch für die Ausgabe verantwortlich ist, springt hier Astro ein. Das bedeutet aber auch, dass Themes in der vorhandenen Form aus WordPress nicht in Astro übernommen werden können: Das Frontend muss neu aufgebaut werden, etwa mit Hilfe von TailwindCSS. Eine detaillierte Schritt-für-Schritt-Anleitung, wie Astro und WordPress in neuen Projekten zusammenfinden, gibt es im OpenReplay-Blog. Natürlich eignet sich die Anleitung auch für Legacy-Projekte, die überarbeitet werden sollen: Die Kombination mit Astro und dem Server-Side-Rendering erlaubt dabei einen deutlichen Geschwindigkeitsvorteil samt modernem Frontend.

(ID:50136554)