Reducing Client-Side Bloat with Astro's Island Architecture
Learn how Astro's Island Architecture uses partial hydration to eliminate unnecessary JavaScript, improving page load speeds by selectively hydrating interactive components.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Learn how Astro's Island Architecture uses partial hydration to eliminate unnecessary JavaScript, improving page load speeds by selectively hydrating interactive components.
Astro's island architecture hydrates only the interactive components you explicitly mark, shipping zero framework JavaScript for static content. This guide explains the mechanism, directive choices, composition patterns, and common pitfalls with a worked example.
Learn how to lazy‑hydrate Astro islands with the client:visible directive to reduce initial JavaScript, improve LCP and FID, and keep interactive components ready when users scroll into view.