hsb.horse
Ich habe eine mit Astro.js und Pagefind gebaute Website auf Cloudflare Pages deployed und stand dann vor dem Problem, dass die Suche lokal funktionierte, in Produktion aber komplett ausfiel.
Pagefind ist eine starke Suchbibliothek für statische Websites. Sie passt gut zu Astro.js und lässt sich relativ einfach einbauen. Trotzdem trat nach dem Deployment auf Cloudflare Pages ein unerwartetes Problem auf.
Untersuchungsprozess
Erste Prüfung
Nachdem ich den Fehler bemerkt hatte, habe ich zuerst Folgendes geprüft:
- Ich habe die Pagefind-Issues auf GitHub durchsucht, aber keine ähnlichen Fälle mit Cloudflare Pages gefunden
- Ich habe die Browser-Konsole geprüft, dort erschien jedoch keine eindeutige Fehlermeldung
- Ich habe im Netzwerk-Tab kontrolliert, ob die Pagefind-Dateien geladen werden, und das sah zunächst normal aus
Daraus habe ich geschlossen, dass die Ursache eher nicht in Pagefind selbst liegt, sondern in einer Cloudflare-Einstellung.
Cloudflare-Einstellungen prüfen
Cloudflare bietet verschiedene Performance-Optimierungen. Auf meiner Seite waren unter anderem diese Funktionen aktiv:
- Cloudflare Zaraz: optimiert die Auslieferung von Analytics-Tools wie GA4
- Cloudflare Speed: eine Sammlung von Optimierungen zur Beschleunigung der Website
Zuerst habe ich Zaraz deaktiviert und erneut getestet, aber ohne Erfolg.
Danach habe ich mir die Cloudflare-Speed-Einstellungen genauer angesehen. Dabei fiel mir auf, dass Rocket Loader aktiviert war.
Ursache und Lösung
Was ist Rocket Loader?
Rocket Loader ist eine Cloudflare-Funktion zur Optimierung des JavaScript-Ladens. Sie verbessert die wahrgenommene Ladegeschwindigkeit durch asynchrones Laden, kann aber auch Ausführungsreihenfolge und Timing beeinflussen.
Die Lösung
Gehen Sie im Cloudflare-Dashboard zu Speed -> Optimization und schalten Sie Rocket Loader aus.
Nach dieser Änderung und einem erneuten Laden der Seite funktionierte die Pagefind-Suche wieder normal.
Zusammenfassung
Astro.js + Pagefind ist eine gute Kombination für Suche auf statischen Sites, aber beim Hosting auf Cloudflare Pages muss man auf die Kompatibilität mit Rocket Loader achten.
Wenn Sie auf dasselbe Problem stoßen, ist das Deaktivieren von Rocket Loader sehr wahrscheinlich die Lösung. Alternativ kann es sich lohnen, den Initialisierungscode von Pagefind so anzupassen, dass er mit Rocket Loader zusammenarbeitet.