hsb.horse
J’ai déployé sur Cloudflare Pages un site construit avec Astro.js et Pagefind, puis je me suis retrouvé avec un moteur de recherche qui fonctionnait en local mais plus du tout en production.
Pagefind est une excellente bibliothèque de recherche pour sites statiques. Elle se combine bien avec Astro.js et reste assez simple à intégrer. Malgré cela, le déploiement sur Cloudflare Pages a révélé un problème inattendu.
Processus d’investigation
Première enquête
Après avoir remarqué le problème, j’ai d’abord vérifié les points suivants :
- J’ai parcouru les issues de Pagefind, mais je n’ai trouvé aucun cas similaire lié à Cloudflare Pages
- J’ai consulté la console des outils de développement du navigateur, sans message d’erreur clair
- J’ai regardé l’onglet réseau, et les fichiers liés à Pagefind semblaient se charger normalement
À partir de là, j’ai estimé que le problème venait probablement moins de Pagefind lui-même que d’un réglage côté Cloudflare.
Analyse des réglages Cloudflare
Cloudflare propose de nombreuses optimisations de performance. Sur mon site, les fonctionnalités suivantes étaient activées :
- Cloudflare Zaraz : une fonction qui optimise la diffusion d’outils d’analytics comme GA4
- Cloudflare Speed : un ensemble d’optimisations destiné à accélérer le chargement du site
J’ai d’abord désactivé Zaraz et retesté, sans effet.
J’ai ensuite examiné de plus près les réglages Cloudflare Speed. C’est là que j’ai vu que Rocket Loader était activé.
Cause et solution
Qu’est-ce que Rocket Loader ?
Rocket Loader est une fonctionnalité Cloudflare qui optimise le chargement du JavaScript. Elle améliore la vitesse perçue en chargeant les scripts de manière asynchrone, mais peut modifier l’ordre d’exécution et le timing.
La solution
Dans le tableau de bord Cloudflare, allez dans Speed -> Optimization, puis désactivez Rocket Loader.
Après cette modification et un rechargement du site, la recherche Pagefind s’est remise à fonctionner normalement.
Résumé
Le duo Astro.js + Pagefind fonctionne très bien pour la recherche sur site statique, mais sur Cloudflare Pages il faut faire attention à la compatibilité avec Rocket Loader.
Si vous rencontrez le même problème, désactiver Rocket Loader a de fortes chances de le résoudre. Sinon, vous pouvez aussi envisager d’ajuster le code d’initialisation de Pagefind pour le rendre compatible avec Rocket Loader.