Bonjour, je suis Ōtsuka, CTO chez Liberogic.
Écrire un article, vraiment ? Eh bien...
Je me suis donc dit que j'allais laisser quelques notes techniques sur la « mise en place d'un CMS partiel sur un site existant ».
Autrefois, la solution classique consistait à utiliser PHP pour « injecter la logique directement dans le HTML ». Aujourd'hui, grâce aux Functions de Cloudflare Pages, on peut construire une architecture plus élégante, tout en tenant compte du SEO pour une bonne indexation par Google.
Cet article présente comment nous avons ajouté un « SSR a posteriori » à un site statique construit avec Eleventy, via Cloudflare Pages Functions, et intégré microCMS.
Points clés de cette architecture
Pour ce projet, le frontend est construit avec Eleventy et Nunjucks. Contrairement à une approche où les Functions sont intégrées au projet, comme avec Astro, nous injectons du contenu dynamique après coup dans le HTML statique généré dans dist/.
Étonnamment, c'est très pratique à manipuler.
1. Activer l'authentification Basic uniquement sur l'environnement de prévisualisation
L'exigence était la suivante : ajouter une authentification sur l'environnement de prévisualisation, tout en réduisant autant que possible l'exécution inutile du Worker en production (pour des raisons de coût). Nous avons donc mis en place une petite astuce dans le prétraitement de build : seul lors du build de production, _middleware.js est supprimé.
En production, le traitement d'authentification n'est pas exécuté, ce qui permet de limiter les coûts d'exécution superflus tout en conciliant sécurité et praticité.
2. Mise en cache des réponses de microCMS avec la Cache API
Avec le rendu côté serveur (SSR), la charge et la latence liées à l'appel de l'API à chaque requête deviennent une préoccupation naturelle.
Nous avons donc choisi d'utiliser la Cache API de Cloudflare pour mettre les réponses en cache à la périphérie du réseau. La durée de vie (TTL) du cache est volontairement courte, fixée à environ 5 à 10 minutes.
Cette approche préserve la fraîcheur du contenu tout en garantissant de bonnes performances.
3. Purge du cache avec KV (revalidate)
Même avec un TTL court, il est frustrant de devoir attendre que les modifications soient visibles après une mise à jour. Nous avons donc utilisé Cloudflare KV comme magasin de contrôle pour la revalidation.
Le fonctionnement reste simple.
- Un Webhook se déclenche lorsqu'un article est mis à jour dans microCMS.
- La valeur KV est mise à jour à ce moment-là.
- Les Pages Functions déterminent, à partir de la valeur KV utilisée comme déclencheur, s'il faut invalider le cache.
Le résultat : un fonctionnement à la fois ultra-rapide grâce au cache au quotidien et une mise à jour immédiate lors des modifications, le meilleur des deux approches.
Conclusion
Cette approche, qui tire parti des atouts d'un site statique existant tout en ne traitant à la périphérie que les parties nécessaires, offre une grande souplesse d'exploitation, et c'est ce qui me plaît.
Retrouver la simplicité de PHP d'autrefois avec la puissance actuelle de Cloudflare ! Les migrations de frameworks spectaculaires ont leur intérêt, mais ce sont ces améliorations concrètes et pragmatiques qui sont, en pratique, les plus utiles sur le terrain.
Bref, voilà.
Pilier du département technique de Liberogic. Lorsqu'il entend une remarque du type « Ce serait pratique d'avoir ça… », il ajoute de la valeur grâce à son ingéniosité et met en œuvre la solution en un rien de temps. Très apprécié des clients pour sa grande capacité de communication, il est aussi un trésor de notre entreprise, et un grand amoureux des chats.
Sho Otsuka
Directeur technique (CTO) / Ingénieur en chef / Représentant de Nekoana LLC / Paraît étonnamment jeune