Client Directives in Astro
From the Astro cheat sheet · Framework Components · verified Jul 2026
Client Directives
astro
---
import Counter from './Counter.jsx';
---
<!-- Default: static HTML only, no JS -->
<Counter />
<!-- Load immediately on page load -->
<Counter client:load />
<!-- Load when browser is idle -->
<Counter client:idle />
<!-- Load when scrolled into view -->
<Counter client:visible />
<!-- Load on media query match -->
<Counter client:media="(max-width: 768px)" />
<!-- Only render on client, skip SSR -->
<Counter client:only="react" />✅ Framework components render as static HTML by default
💡 client:* directives add interactivity (ship JavaScript)
🔍 client:load for above-fold critical components
⚡ client:visible for lazy loading below-the-fold content
clienthydrationislandsdirectives