Astro 5 Islands Architecture: Zero-JS by Default, Interactive Where It Counts

My bounce rate dropped from 62% to 38% after migrating our core documentation portal to Astro 5.

Why? Because traditional React SPA bundles were sending 480KB of JavaScript just to render static text and a navigation bar. Astro sends zero JavaScript by default.

What is Islands Architecture?

Instead of hydrating your entire HTML page with client-side JavaScript, Astro treats your page as a static HTML ocean with isolated interactive islands.

---
// Header, Footer, and Content are static HTML
import Header from '../components/Header.astro';
import WordCounter from '../components/WordCounter.astro';
---

<Header />
<main>
  <!-- This island hydrates independently on client load -->
  <WordCounter client:load />
</main>

“Stop forcing users to download 500KB of framework runtime just to read a blog post.”

Process: How We Scaled to 100k Monthly Visits

1. Static Pre-rendering: Build pages at compile-time as pure HTML/CSS.
2. Selective Hydration: Use client:visible or client:idle directives for widgets below the fold.
3. Global Edge CDN: Deploy directly to Cloudflare Pages for sub-50ms TTFB worldwide.