What is Islands Architecture, and how does it compare with traditional React Hydration?

Short answer

Islands render a page as fully static HTML and run JavaScript and Hydration only in small, independent, interactive regions, removing unused JavaScript.

Explanation

Traditional React hydrates the entire tree from root to leaves, even if 90% of the page is static text. Islands Architecture, used by frameworks such as Astro, keeps static sections free of JavaScript and loads React only for interactive buttons and forms, reducing the JavaScript bundle to zero for textual content.

Code example

<!-- Conceptual example of Islands Architecture -->
<header>HTML Static with no JavaScript</header>
<article>Ultra-fast static article content</article>
<!-- Interactive island only for the React comments component -->
<CommentsIsland client:visible />

Common mistakes

• Believing that every site page needs full React Hydration even when it contains read-only content.

Follow-up questions

• What is Hydration, and what commonly causes a Hydration Mismatch?
• What are React Server Components (RSC), and how do they fundamentally differ from SSR?

Sources

• Astro docs — Islands architecture