Introduction
Astro has popularized Islands Architecture, a pattern where the page renders as static HTML and only interactive components are JavaScript islands.
What are islands
An island is an interactive component in a mostly static page. Each island hydrates independently without affecting the rest of the page.
Advantages of Islands Architecture
Zero JavaScript until needed. Islands load on demand, drastically reducing initial load time and improving Core Web Vitals.
Astro as Meta-framework
Astro supports components from React, Vue, Svelte, and SolidJS. Use your favorite framework for interactive islands and Astro for the rest.
Hydration strategies
Astro offers multiple strategies: client:load, client:idle, client:visible, and client:media. You choose when and how each island hydrates.
Ideal use cases
Blogs, documentation, landing pages, e-commerce with static catalogs, and dashboards with specific interactive parts.
Conclusion
Astro and Islands Architecture are perfect for content-focused sites. At Vynta, we build Astro sites that load in milliseconds.