Islands Architecture Pattern
Ship mostly static HTML and hydrate only interactive widgets for optimal Time-To-Interactive.
What Is Islands Architecture?
Islands Architecture ships mostly static HTML with small, independently hydrated interactive sections (islands). Most of the page is zero-JS; only widgets that need interactivity become React islands.
The Problem It Solves
Traditional SSR hydrates the entire page even if 90% of it is static content (headers, text, images). Islands hydrate only the interactive parts, drastically reducing JavaScript sent to the browser.
All lessons in this course
- How React SSR Works Under the Hood
- Hydration Errors: Causes & Fixes
- Selective Hydration & Streaming HTML
- Islands Architecture Pattern