How much JavaScript in the Astro client side router?

[civic comet]

Hello, I was wondering how much JavaScript is in the client side router? How much is downloaded by the user?

[upbeat bronze]

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

---

Astro emphasizes minimized JavaScript usage for an improved user experience. By default, Astro will automatically render every UI component to just HTML & CSS, stripping out all client-side JavaScript automatically. This behavior is what keeps Astro websites fast by default and protects developers from accidentally sending unnecessary or unwanted JavaScript that might slow down their website.

However, you can turn any static UI component into an interactive island by using a client:* directive. Astro then automatically builds and bundles your client-side JavaScript for optimized performance. With islands, client-side JavaScript is only loaded for the explicit interactive components that you mark using client:* directives.

For example, if you want a component to be interactive, you can use the client:load directive like this:

<!-- This component is now interactive on the page! The rest of your website remains static. -->
<MyReactComponent client:load />

This means that the amount of JavaScript downloaded by the user can be controlled and optimized based on the specific needs of your website and its components.

For more information, you can refer to the Astro documentation on creating an island (https://docs.astro.build/en/concepts/islands/#creating-an-island).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: