client:visible
The client:visible directive hydrates a component only when it scrolls into the viewport.
Syntax
<Carousel client:visible />Examples
---
import Comments from '../components/Comments.jsx';
---
<Comments client:visible />
<Comments client:visible={{ rootMargin: '200px' }} />
Output
Hydration is deferred until the component nears the viewport, optionally 200px early.
Notes
Ideal for below-the-fold islands like comment widgets or carousels; it ships zero JS until needed. Uses IntersectionObserver and accepts a rootMargin option to hydrate slightly before entry.