astrolisted

# Astro ## Islands Architecture Astro renders everything to static HTML by default. JavaScript ships only for components that explicitly opt in — these are called Islands. ### Hydration Directives | Directive | When JS loads | Use case | |-----------|--------------|----------| | `client:load` | On page load | Interactive above-the-fold UI | | `client:idle` | When browser is idle | Non-critical interactive widgets | | `client:visible` | When element enters viewport | Below-the-fold islands | | `client:media` | When CSS media query matches | Responsive interactive components | | `client:only` | Client-only, no SSR | Components that require the DOM (e.g., charting libs) | ```astro --- import Counter from '../components/Counter.tsx'; import HeavyChart from '../components/HeavyChart.tsx'; import MobileNav from '../components/MobileNav.tsx'; --- <!-- Hydrates immediately — user interacts right away --> <Counter client:load /> <!-- Hydrates when scrolled into view — saves initial JS --> <HeavyChart client:visible /> <!-- Only on mobile, only when query matches --> <MobileNav client:media="(max-width: 768px)" /> ``` Rules: - Default to no hydration directive — most UI does not need JavaScript - `client:load` is the most expensive directive; use it sparingly - `client:only` skips server rendering entirely — the component receives no props from the server; pass all data via props or fetch inside the component - Do not use `client:load` for components that could use `client: