logo hsb.horse
← Back to blog index

Blog

Why Pagefind Search Broke on Cloudflare Pages: Rocket Loader Was the Cause

Root cause and fix for a search UI that worked locally with Astro + Pagefind but failed after deployment to Cloudflare Pages.

Published:
#pagefind #cloudflare #astro #troubleshooting

Translations

German French Japanese Korean Portuguese

I deployed a website built with Astro.js and Pagefind to Cloudflare Pages, then ran into a problem where search worked locally but stopped working entirely in production.

Pagefind is an excellent search library for static sites. It fits Astro.js well and is fairly easy to integrate. Even so, deployment to Cloudflare Pages exposed an unexpected issue.

Investigation Process

Initial Investigation

After noticing the issue, I first checked the following points:

  1. I looked through Pagefind issues, but found no similar reports tied to Cloudflare Pages
  2. I inspected the browser developer tools console, but there was no clear error message
  3. I checked the network tab and saw that Pagefind-related files appeared to load normally

From that, I concluded the problem was probably not Pagefind itself but something in Cloudflare’s settings.

Investigating Cloudflare Settings

Cloudflare has multiple performance optimization features. I had the following enabled on the site:

  1. Cloudflare Zaraz: a feature that optimizes delivery of analytics tools such as GA4
  2. Cloudflare Speed: a collection of features intended to improve site loading speed

I first disabled Zaraz and tested again, but the issue remained.

Next, I inspected the Cloudflare Speed settings more closely. That was when I noticed that Rocket Loader was enabled.

Cause and Fix

What Is Rocket Loader?

Rocket Loader is a Cloudflare feature that optimizes JavaScript loading. It improves perceived page speed by loading JavaScript asynchronously, but it can also affect execution order and timing.

The Fix

In the Cloudflare dashboard, go to Speed -> Optimization and turn Rocket Loader off.

After applying that change and reloading the site, Pagefind search started working normally again.

Summary

Astro.js + Pagefind is a strong combination for static-site search, but if you host on Cloudflare Pages, you need to watch out for Rocket Loader compatibility.

If you are seeing the same behavior, disabling Rocket Loader is a likely fix. Another option may be adjusting the Pagefind initialization code so it can coexist with Rocket Loader.