Lazy hydration with mochi:hydrate:visible

Defer hydration until a component scrolls into the viewport. The component still renders on the server on every request. Its JavaScript and CSS are fetched only when the wrapper intersects the viewport.

<!-- file: src/Page.svelte -->
<HeavyChart mochi:hydrate:visible />

Pass an options object to start loading before the element enters the viewport. Mochi forwards rootMargin to IntersectionObserver.

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

The default rootMargin is '0px' — hydration fires the moment the island’s first child crosses the viewport edge.

Combining with mochi:defer

Stack mochi:defer mochi:hydrate:visible to defer both rendering and hydration. The placeholder ships with the page. The SSR HTML streams in when the deferred fetch resolves. The JavaScript loads only after the rendered island scrolls into view.

<Comments mochi:defer mochi:hydrate:visible={{ rootMargin: '300px' }} />

See Selective hydration for mochi:hydrate and Server islands for mochi:defer.