Lazy hydration with mochi:hydrate:visible

Defer hydration until a component scrolls into view using mochi:hydrate:visible:

<HeavyChart mochi:hydrate:visible />
<HeavyChart mochi:hydrate:visible={{ rootMargin: '200px' }} />

The component is server-rendered, but its JavaScript and CSS are only loaded when it becomes visible. Pass rootMargin to start loading before the component enters the viewport.

Note: Visible islands require JS to be fully styled — their CSS is not included in the initial page load.