React Academy · Lesson

Islands Architecture Pattern

Ship mostly static HTML and hydrate only interactive widgets for optimal Time-To-Interactive.

Islands Architecture Pattern is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Core Concept

Think of the page as a sea of static HTML with islands of interactivity floating in it. Each island hydrates independently and can use a different framework if needed.

Astro as Islands Framework

Astro popularized islands architecture. Components default to zero JS. Add a client:* directive to opt into hydration.

---
import Header from './Header.astro';      // static — 0 JS
import SearchBar from './SearchBar.jsx';  // island — hydrated
import Footer from './Footer.astro';      // static — 0 JS
---
<Header />
<SearchBar client:load />   <!-- hydrate immediately -->
<SearchBar client:idle />   <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />

Hydration Directives

Islands frameworks offer granular hydration timing: client:load (immediate), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (CSS media query).

Implementing Islands in Next.js

Next.js App Router approximates islands via Server/Client Component split. Server Components = static; Client Components = islands.

// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
  const product = await getProduct();
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* Only the interactive button is a Client Component island */}
      <AddToCartButton product={product} />
    </article>
  );
}

Manual Islands with React lazy

Without a dedicated framework, achieve islands by lazy-loading interactive components only after the page loads.

const HeavyWidget = lazy(() => import('./HeavyWidget'));

function Page() {
  const [show, setShow] = useState(false);
  const containerRef = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) setShow(true);
    });
    obs.observe(containerRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={containerRef}>
      {show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
    </div>
  );
}

Trade-offs

Benefits: minimal JS, fast TTI, static content cached aggressively. Costs: islands can't easily share state (separate JS contexts), more complex architecture than a standard SPA.

Sharing State Between Islands

Use browser-native mechanisms (custom events, URL, localStorage) or a tiny shared store singleton to communicate between independent islands.

// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);

// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));

When to Use Islands Architecture

Best for: content-heavy sites (blogs, e-commerce, marketing) where most content is static and only a few components need interactivity (search, cart, forms).

Islands vs SSR vs SPA

SPA: all JS, hydrates everything. SSR: server renders + hydrates everything. Islands: server renders everything, hydrates only interactive widgets. Islands wins on performance for content sites.

Quick Check

What is the primary performance benefit of the Islands Architecture pattern?

Recap

Islands Architecture keeps most HTML static (zero JS) and hydrates only interactive widgets. Use Astro for a purpose-built islands framework, or approximate it with Next.js Server/Client Components. Hydrate lazily with client:visible/IntersectionObserver for non-critical islands.

Frequently asked questions

Is the “Islands Architecture Pattern” lesson free?

Yes — the full text of “Islands Architecture Pattern” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Islands Architecture Pattern”?

Ship mostly static HTML and hydrate only interactive widgets for optimal Time-To-Interactive. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Islands Architecture Pattern” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy