Astro
Demystifying Astro Islands: A Practical Guide
Astro's 'islands' architecture is a game-changer for web performance. In this article, we break down what they are, how they work, and how you can use them to build faster websites.
What are Astro Islands?
Astro Islands are a new approach to building websites that deliver less JavaScript to the client by default. The key idea is that most of a content-focused website is static, with pockets of interactivity. These pockets are the ‘islands’.
How they work
- Server-Side Rendering (SSR): Astro renders your entire page to static HTML on the server.
- Zero JS by Default: No client-side JavaScript is loaded for your UI components automatically.
- Hydration on Demand: You explicitly mark which components need to be interactive on the client using
client:*directives. Astro then automatically hydrates these components (and only these components) when they become visible, are clicked, or the page finishes loading.
This means your users get a super-fast initial page load, and the JavaScript for interactive elements is only loaded when it’s actually needed.