Hallo, ich bin Otsuka, CTO bei Liberogic.
Einen Artikel irgendwie hinbekommen? Tja, das ist gar nicht so einfach …
Deshalb möchte ich hier ein paar technische Notizen zur „teilweisen CMS-Umstellung einer bestehenden Website“ festhalten.
Früher war es üblich, mit PHP „Logik direkt in das HTML einzufügen“. Heute lässt sich mit Cloudflare Pages Functions deutlich eleganter arbeiten und eine Struktur aufbauen, die auch unter Berücksichtigung von SEO sauber von Google indexiert werden kann.
In diesem Beitrag zeige ich, wie wir eine mit Eleventy erstellte statische Website mithilfe von Cloudflare Pages Functions nachträglich um SSR erweitert und microCMS integriert haben.
Die wichtigsten Punkte der Architektur
Bei diesem Projekt haben wir das Frontend mit Eleventy und Nunjucks umgesetzt. Anders als bei Astro, wo Functions direkt im Projekt eingebettet werden, setzen wir auf einen Ansatz, bei dem dynamische Inhalte nachträglich in das statische HTML eingefügt werden, das nach dist/ ausgegeben wird.
Das erweist sich in der Praxis als erstaunlich flexibel und praktisch.
1. Nur die Vorschauumgebung mit Basic-Authentifizierung schützen
Die Anforderung lautete, in der Vorschauumgebung eine Authentifizierung einzurichten, im Produktivbetrieb jedoch die Ausführung unnötiger Worker (und damit Kosten) so weit wie möglich zu vermeiden. Deshalb haben wir mit einer kleinen Anpassung im Build-Prozess gearbeitet: Nur beim Produktions-Build wird die Datei _middleware.js entfernt.
Auf der Produktivumgebung durchläuft der Traffic dadurch keine Authentifizierungslogik. So werden unnötige Ausführungskosten vermieden, während Sicherheit und Benutzerfreundlichkeit gleichermaßen gewährleistet bleiben.
2. Caching der microCMS-Antworten mit der Cache API
Bei SSR (Server-Side Rendering) stellt sich zwangsläufig die Frage nach der Belastung und Latenz, wenn bei jeder Anfrage eine API-Abfrage erfolgt.
Dafür nutzen wir die Cache API von Cloudflare, um Antworten am Edge zwischenzuspeichern. Die Cache-TTL haben wir bewusst kurz auf etwa 5 bis 10 Minuten festgelegt.
So bleiben die Inhalte aktuell, und die Performance ist trotzdem gut abgesichert.
3. Cache-Purge mit KV (Revalidierung)
Auch bei einer kurzen TTL ist es für den Betrieb unbefriedigend, wenn Änderungen nicht unmittelbar sichtbar werden. Deshalb nutzen wir Cloudflare KV als Speicher zur Steuerung der Revalidierung.
Der Ablauf ist einfach.
- Ein Webhook wird ausgelöst, wenn ein Beitrag in microCMS aktualisiert wird
- Zu diesem Zeitpunkt wird der KV-Wert aktualisiert
- Die Pages Functions prüfen anhand des KV-Werts, ob der Cache invalidiert werden muss
So entsteht ein Design, das das Beste aus beiden Welten vereint: normalerweise blitzschnelle Auslieferung aus dem Cache, und sofortige Aktualisierung, wenn Inhalte geändert werden.
Fazit
Dieser Ansatz, die Stärken einer bestehenden statischen Website zu erhalten und nur dort am Edge einzugreifen, wo es nötig ist, bietet hohe Flexibilität im Betrieb, und genau das schätze ich daran.
Die unkomplizierte Arbeitsweise früherer PHP-Zeiten, nachgebaut mit der heutigen Leistungsfähigkeit von Cloudflare! Großangelegte Framework-Migrationen haben ihren Reiz, doch solche bodenständigen Verbesserungen sind in der Praxis oft die nützlichsten.
Soviel dazu.
Das Rückgrat der technischen Abteilung von Liberogic. Wenn er Sätze hört wie „So etwas hätte ich gern, das wäre praktisch!“, veredelt er die Idee mit seinem Know-how und setzt sie im Handumdrehen um. Mit seiner hohen Kommunikationsstärke hat er viele Fans unter unseren Kunden – unser Schatz, und ein echter Katzenfreund.
Sho Otsuka
Vorstand CTO / Chief Engineer / Geschäftsführer der Nekoana LLC / Sieht unnötig jung aus