hsb.horse
Publiquei no Cloudflare Pages um site construído com Astro.js e Pagefind e encontrei um problema em que a busca funcionava localmente, mas parava completamente em produção.
Pagefind é uma ótima biblioteca de busca para sites estáticos. Ela combina bem com Astro.js e é relativamente fácil de integrar. Mesmo assim, o deploy no Cloudflare Pages revelou um problema inesperado.
Processo de investigação
Investigação inicial
Depois de perceber o problema, comecei verificando os pontos abaixo:
- Consultei as issues do Pagefind, mas não encontrei relatos semelhantes relacionados ao Cloudflare Pages
- Verifiquei o console das ferramentas de desenvolvedor do navegador, mas não havia uma mensagem de erro clara
- Conferi a aba de rede e os arquivos do Pagefind pareciam ser carregados normalmente
Com isso, concluí que o problema provavelmente não estava no próprio Pagefind, mas em alguma configuração do Cloudflare.
Investigando as configurações do Cloudflare
O Cloudflare oferece várias otimizações de performance. No meu site, os seguintes recursos estavam ativados:
- Cloudflare Zaraz: recurso que otimiza a entrega de ferramentas de analytics como GA4
- Cloudflare Speed: conjunto de recursos para melhorar a velocidade de carregamento do site
Primeiro, desativei o Zaraz e testei de novo, mas nada mudou.
Em seguida, examinei com mais atenção as configurações do Cloudflare Speed. Foi então que notei que o Rocket Loader estava ativado.
Causa e solução
O que é Rocket Loader?
Rocket Loader é um recurso do Cloudflare para otimizar o carregamento de JavaScript. Ele melhora a velocidade percebida ao carregar scripts de forma assíncrona, mas também pode afetar a ordem de execução e o timing.
A solução
No painel do Cloudflare, acesse Speed -> Optimization e desligue o Rocket Loader.
Depois dessa mudança e de recarregar o site, a busca com Pagefind voltou a funcionar normalmente.
Resumo
Astro.js + Pagefind é uma combinação muito boa para busca em sites estáticos, mas, ao hospedar no Cloudflare Pages, é preciso tomar cuidado com a compatibilidade do Rocket Loader.
Se você estiver enfrentando o mesmo comportamento, desativar o Rocket Loader tem grande chance de resolver. Outra opção é ajustar o código de inicialização do Pagefind para coexistir com ele.