Skip to content
Frontend Architecture Patterns

Islands Architecture

Islands Architecture focuses on minimizing JavaScript by only hydrating the parts of the page that actually need interactivity.

What it is

Section titled “What it is”

The bulk of the page is static HTML. Only specific components (the “islands”) are hydrated with JavaScript. Hydration can be triggered by visibility, idle time, or interaction.

When it works well

Section titled “When it works well”
  • Content-rich sites with dynamic widgets: Blogs with a newsletter signup, documentation with a search bar.
  • Performance-first projects: Maximizing Core Web Vitals by shipping minimal JS.
Section titled “Related Concepts”
  • Resumability: A technique used by Qwik that eliminates hydration entirely by serializing application state into HTML, allowing it to “resume” instantly.
  • Lazy Hydration: Only loading the JS for a component when it enters the viewport.

When it becomes problematic

Section titled “When it becomes problematic”
  • Cross-Island Communication: If many components need to share complex state, the orchestration can become difficult.
  • Deeply interactive apps: If the entire page is interactive, the overhead of managing many islands outweighs the benefits.

Technical Complexity

Section titled “Technical Complexity”

Medium. Popularized by Astro, Fresh, and Marko.

Section titled “Related Patterns”