#"astro:page-load" only fires once

4 messages · Page 1 of 1 (latest)

haughty chasm
#

the "astro:page-load" only fires once on initial page load and doesn't fire after that, this only happens when my site is deployed to cloudflare pages. It works fine locally

fluid mothBOT
#

Hi @haughty chasm. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, the astro:page-load event should fire at the end of page navigation, after the new page is visible to the user and blocking styles and scripts are loaded. This event is fired both on initial page navigation (MPA) and any subsequent navigation, either forwards or backwards.

Here is an example of how you can use this event to run code on every page navigation, or only once ever:

<script> 
document.addEventListener('astro:page-load', () => { 
  // This only runs once. 
  setupStuff(); 
}, { once: true });
</script>

If you're experiencing issues with this event not firing as expected on Cloudflare Pages, it could be due to a bug or a configuration issue. There is a known bug related to server-rendered 404 pages not working correctly on Cloudflare, but it doesn't seem directly related to your issue.

For troubleshooting, ensure that the version of node you're using locally matches the version you're specifying in the environment variable. Cloudflare requires Node v16.13, which is a more recent version than Astro’s out-of-the-box minimum. Also, client-side hydration may fail as a result of Cloudflare’s Auto Minify setting. If you see Hydration completed but contains mismatches in the console, make sure to disable Auto Minify under Cloudflare settings.

If the issue persists, it might be worth checking the Astro GitHub issues (https://github.com/withastro/astro/issues) for similar problems or creating a new issue to get help from the Astro community.