Bonjour, je suis Otsuka, CTO chez Liberogic.
Me demander d'écrire un article comme ça, c'est plutôt difficile...
Je vais donc vous laisser quelques notes techniques sur le sujet du « partiel CMS pour site existant ».
Autrefois, on utilisait PHP pour « injecter la logique dans le HTML », c'était la norme. Mais aujourd'hui, avec Cloudflare Pages Functions, on peut créer une architecture bien plus élégante et optimisée pour le SEO, qui assure correctement l'indexation par Google.
Dans ce cas, je vous présente comment nous avons appliqué un « SSR ajouté a posteriori » avec Cloudflare Pages Functions à un site statique construit avec Eleventy, et intégré microCMS.
Points clés de cette architecture
Pour ce projet, nous construisons le frontend en utilisant Eleventy + Nunjucks. Au lieu d'intégrer les Functions dans le projet comme le fait Astro, nous avons adopté une approche où dist/ contient du HTML statique, et nous injectons le contenu dynamique ultérieurement.
C'est étonnamment flexible et pratique.
1. Appliquer l'authentification basique uniquement à l'environnement de prévisualisation
L'exigence était « on veut l'authentification en prévisualisation, mais minimiser l'exécution des Workers en production (et donc les coûts) ». Nous avons donc adopté une stratégie où lors du build de production seulement, nous supprimons _middleware.js via un prétraitement du build.
En environnement de production, nous contournons le traitement d'authentification, ce qui réduit les coûts d'exécution inutiles tout en maintenant l'équilibre entre sécurité et commodité.
2. Mise en cache des réponses microCMS avec l'API Cache
Avec SSR (Server-Side Rendering), ce qui préoccupe inévitablement, c'est « la charge et la latence liées aux appels API à chaque requête ».
Nous avons décidé d'utiliser la Cache API de Cloudflare pour mettre en cache les réponses à la périphérie. Nous avons défini le TTL du cache à environ 5-10 minutes, une durée relativement courte.
Nous maintenons la fraîcheur des données tout en garantissant des performances solides.
3. Purge du cache (revalidate) avec KV
Même avec un TTL court, le fait que « les mises à jour ne se reflètent pas instantanément » est un peu stressant pour l'équipe opérationnelle. Nous avons donc utilisé Cloudflare KV comme magasin de contrôle pour la revalidation.
Le mécanisme est simple.
- Lorsqu'un article est mis à jour dans microCMS, un webhook est déclenché
- À ce moment-là, nous mettons à jour la valeur dans KV
- Déterminer côté Pages Functions si le cache doit être invalidé en fonction de la valeur KV
Nous avons ainsi obtenu une conception optimale : « normalement rapide avec le cache, mais reflétant les modifications instantanément lors des mises à jour ».
Conclusion
J'aime vraiment cette approche « tirer parti des avantages des sites statiques existants tout en appliquant le traitement au niveau edge uniquement où nécessaire », car elle offre une grande flexibilité opérationnelle.
Reproduire la facilité du PHP d'autrefois avec la puissance actuelle de Cloudflare ! Les migrations de frameworks spectaculaires, c'est bien, mais c'est vraiment cette « amélioration pragmatique » qui se révèle la plus utile sur le terrain.
Bon, à bientôt.
Le pilier du département technique de Liberogic. Dès qu'il entend « J'aimerais bien avoir ça, ce serait pratique », il se met au travail avec sa créativité naturelle et ajoute de la valeur en un rien de temps. Avec ses excellentes compétences en communication et ses nombreux fans parmi nos clients, c'est un trésor de l'entreprise — et passionné par les chats.
Shô
Directeur technique / Ingénieur en chef / Représentant de Neko-Ana LLC / Étonnamment jeune d'apparence