Islands Architecture

Interactive React islands in a sea of static HTML

client:load

Hydrates immediately when the page loads

client:visible

Hydrates when scrolled into view

client:idle

Hydrates when browser is idle

client:only

Skips SSR, renders only on client

Client Directives

Directive	When it Hydrates	Use Case
client:load	Immediately on page load	Critical interactive elements
client:idle	When browser is idle	Lower priority components
client:visible	When scrolled into view	Below-the-fold content
client:media	When media query matches	Mobile-only interactions
client:only	Only on client (no SSR)	Browser-only components

Code Example

---
// pages/dashboard.astro
import { Counter } from '../components/Counter';
import { Chart } from '../components/Chart';
import { Comments } from '../components/Comments';
---

<Layout>
  <!-- Static HTML - no JS shipped -->
  <h1>Dashboard</h1>
  <p>This text is pure HTML</p>

  <!-- Interactive islands with React -->
  <Counter client:load />     <!-- Critical, load immediately -->
  <Chart client:visible />    <!-- Load when scrolled into view -->
  <Comments client:idle />    <!-- Load when browser is idle -->
</Layout>