Islands Architecture: Why Your Site Doesn't Need All That JavaScript

Astro Islands Architecture

When you build with React or Next.js, every component ships JavaScript to the browser — even the ones that never change. A static heading, a footer, a card grid — all hydrated, all adding to your bundle.

Astro’s Islands Architecture takes a different approach. By default, components render to HTML with zero JavaScript. You opt-in to interactivity only where it matters.

---

How It Works

Think of your page as an ocean of static HTML. Interactive components — a carousel, a search bar, a dark mode toggle — are “islands” of JavaScript in that ocean.

---
import Counter from '../components/Counter.jsx';
---
<h1>This is static HTML</h1>
<Counter client:visible />

The client:visible directive tells Astro: “Only load this component’s JavaScript when it scrolls into view.” Your heading? Pure HTML. No JS overhead.

---

The Performance Impact

In our course project — a documentation site — switching from Next.js to Astro dropped the JavaScript bundle from 180KB to 12KB. Same features, same design. Just smarter hydration.

---

When to Use Islands

Use Case	Directive	Description
Forms and inputs	client:load	Hydrate the component immediately on page load.
Below-the-fold widgets	client:visible	Hydrate only when the component enters the viewport.
Lower priority interactions	client:idle	Hydrate once the main thread is free (requestIdleCallback).

The key insight: Most of your site is static. Treat it that way.

---

Would you like me to create a Tailwind CSS-styled layout for this content?