Hallo, ich bin Otsuka, CTO bei Liberogic.
Na ja, ich weiß nicht, wie ich einen Artikel schreiben soll, wenn man mir nur sagt, ich soll es irgendwie machen…
Deshalb möchte ich ein paar technische Notizen zum Thema „Teilweise CMS-Integration einer bestehenden Website" hinterlassen.
Früher war es üblich, PHP zu verwenden und „Logik direkt in HTML einzubetten", aber heute können Sie Cloudflare Pages Functions nutzen, um eine intelligentere und saubere Struktur zu schaffen, die SEO-freundlich ist und ordnungsgemäß von Google indexiert wird.
In diesem Beitrag stellen wir vor, wie wir eine mit Eleventy erstellte statische Website durch „nachträgliche SSR" mit Cloudflare Pages Functions erweitert und microCMS integriert haben.
Highlights dieser Konfiguration
In diesem Projekt bauen wir das Frontend mit Eleventy + Nunjucks auf. Im Gegensatz zu Astro, wo Functions im Projekt enthalten sind, haben wir einen Ansatz gewählt, bei dem wir dist/ statisches HTML ausgeben und anschließend dynamische Inhalte einfügen.
Überraschend handlich und praktisch!
1. Ich möchte Basic-Authentifizierung nur in der Vorschau-Umgebung aktivieren
Die Anforderung lautete: „Wir möchten im Vorschau-Environment eine Authentifizierung einbauen, aber in der Produktion die Ausführung von Workern (und damit die Kosten) so weit wie möglich reduzieren." Daher haben wir eine kleine Anpassung in der Pre-Build-Verarbeitung vorgenommen und löschen nur beim produktiven Build die Datei _middleware.js.
In der Produktionsumgebung entfällt die Authentifizierungsverarbeitung, was unnötige Ausführungskosten spart und gleichzeitig Sicherheit und Benutzerfreundlichkeit gewährleistet.
2. Antworten von microCMS mit der Cache API zwischenspeichern
Bei SSR (serverseitiges Rendering) ist es natürlich verständlich, dass man sich „die Last und Latenz von API-Aufrufen bei jedem Request" vor Augen führt.
Wir haben beschlossen, Cache API von Cloudflare zu nutzen, um Responses am Edge zu cachen. Das Cache-TTL wurde auf einen relativ kurzen Wert von 5–10 Minuten eingestellt.
Wir bewahren Aktualität und sorgen gleichzeitig für solide Leistung.
3. Cache-Purging mit KV (revalidate)
Auch mit einer kurzen TTL ist es ein wenig stressig für das Betriebsteam, dass Änderungen nicht sofort nach dem Update sichtbar sind. Deshalb haben wir Cloudflare KV als Kontrolispeicher für Revalidierungen eingesetzt.
Das Konzept ist einfach.
- Wenn Sie einen Artikel in microCMS aktualisieren, wird ein Webhook ausgelöst
- Den KV-Wert zu diesem Zeitpunkt aktualisieren
- Mit Pages Functions können Sie basierend auf KV-Werten entscheiden, ob der Cache ungültig gemacht werden soll.
Dies führt zu einem Design mit dem besten aus beiden Welten: normales Caching für Blitzgeschwindigkeit und sofortige Aktualisierungen bei Änderungen.
Fazit
Ich mag diesen Ansatz sehr, bei dem man die Stärken bestehender statischer Websites bewahrt und nur dort, wo nötig, Edge-Verarbeitung einsetzt – die operative Flexibilität ist einfach großartig.
Die unkomplizierte PHP-Eleganz von früher mit der heutigen Kraft von Cloudflare umsetzen! Große Framework-Migrationen haben ihren Platz, aber solche praktischen, bodenständigen Verbesserungen sind oft das wertvollste für den täglichen Betrieb.
Naja dann.
Das Rückgrat der Technologieabteilung von Liberogic. Wenn sie einen Wunsch hört wie "Ich würde mir das wünschen, das wäre praktisch" – setzt sie ihn sofort mit ihrem natürlichen Gespür um und verleiht der Lösung noch zusätzlichen Mehrwert. Sie ist ein Schatz unseres Unternehmens mit großem Geschick in der Kommunikation und vielen begeisterten Kunden – und eine absolute Katzenliebhaberin.
Shō
Geschäftsführender CTO / Chief Engineer / Vertreter der Godo Kaisha Neko Ana / Sieht unnötig jung aus