Topics

Bonjour, je suis Otsuka, directeur technique chez Liberogic.

Même si vous me demandez de faire quelque chose concernant l'article...

J'ai donc pensé laisser une petite note technique concernant « l'implémentation partielle d'un CMS sur un site web existant ».

Auparavant, l'approche standard consistait à utiliser PHP pour « injecter de la logique dans le HTML », mais maintenant, grâce à Cloudflare Pages Functions, vous pouvez créer une structure beaucoup plus intelligente et optimisée pour le référencement naturel, qui peut être correctement indexée par Google.

Cette fois-ci, je vais vous montrer comment j'ai intégré un microCMS dans un site statique construit avec Eleventy en appliquant le « post-traitement SSR » à l'aide des fonctions Cloudflare Pages.

Points clés de cette configuration

Dans ce projet, nous développons l'interface utilisateur avec Eleventy et Nunjucks. Contrairement à Astro, qui encapsule les fonctions au sein du projet,dist/Nous avons adopté une méthode selon laquelle le contenu dynamique est inséré ultérieurement dans la sortie HTML statique.

Il est étonnamment facile à manipuler et pratique.

1. Je souhaite appliquer l'authentification de base uniquement à l'environnement de prévisualisation.

L’exigence était la suivante : « Nous voulons inclure l’authentification dans l’environnement de prévisualisation, mais nous voulons minimiser l’exécution (le coût) des processus inutiles en production. » Nous avons donc légèrement modifié le traitement de pré-compilation.Uniquement pendant la phase de production_middleware.jsLe processus consiste à le supprimer.

En environnement de production, l'authentification n'est pas requise, ce qui permet d'équilibrer sécurité et commodité tout en minimisant les coûts d'exécution inutiles.

2. Mettre en cache les réponses microCMS à l'aide de l'API Cache.

Lors de l'utilisation du rendu côté serveur (SSR), l'une des principales préoccupations est la charge et la latence causées par les appels API effectués à chaque requête.

C'est celui de Cloudflare.Cache APINous avons opté pour cette méthode afin de mettre en cache la réponse en périphérie du réseau. La durée de vie du cache a été fixée à une valeur relativement courte, de l'ordre de 5 à 10 minutes.

Nous préservons la fraîcheur tout en assurant d'excellentes performances.

3. Purge du cache (revalidation) à l'aide de la clé de volume

Même si le TTL est court, le fait que les mises à jour ne soient pas reflétées instantanément est un peu stressant pour l'équipe des opérations.Cloudflare KVNous l'avons utilisé comme espace de stockage pour contrôler le processus de revalidation.

Le mécanisme est simple.

• Lorsqu'un article est mis à jour via microCMS, un webhook est déclenché.
• La valeur KV est mise à jour à ce moment-là.
• Pages Functions utilise la valeur KV comme déclencheur pour déterminer s'il faut invalider le cache.

Cette conception offre le meilleur des deux mondes : « des mises à jour ultra-rapides grâce à la mise en cache et des mises à jour instantanées ».

résumé

J'apprécie cette approche qui consiste à « tirer parti des atouts des sites statiques existants tout en modifiant uniquement les parties nécessaires avec Edge » car elle offre une grande flexibilité opérationnelle.

Retrouvez la simplicité d'utilisation des anciens PHP grâce à la puissance de Cloudflare ! Si les migrations de frameworks spectaculaires sont attrayantes, ce sont ces « améliorations concrètes » qui s'avèrent les plus utiles dans des situations réelles.

Eh bien, alors.