What is partial hydration / islands architecture and why does it matter?

Islands architecture (Astro, Fresh, Marko) treats a page as mostly static HTML with isolated "islands" of interactivity that hydrate independently.

Traditional SSR problem: Even if 90% of the page is static text, the entire component tree must hydrate — downloading and parsing all JavaScript just to make a nav dropdown work.

Islands approach:

• Static sections are pure HTML — zero JS shipped for them.
• Interactive widgets (carousel, form, modal) are explicit islands — each hydrates independently with only its own JS bundle.
• Result: drastically smaller Total Blocking Time and better INP.

// Astro syntax
---
import Counter from './Counter.tsx'; // React component
---
<main>
  <h1>Static content — no JS</h1>
  <Counter client:load />  {/* hydrates this island only */}
</main>

React Server Components push the same idea into React itself — server components render to HTML, client components hydrate selectively.