---
title: 'Selective hydration with mochi:hydrate'
slug: selective-hydration
description: 'Mark components with mochi:hydrate to ship client-side JavaScript only where interactivity is needed.'
---
## Selective hydration with `mochi:hydrate`
Components render server-side by default and ship zero JavaScript. Add `mochi:hydrate` to opt a component into client-side hydration; everything else stays static HTML.
```svelte
```
Props are serialized with `devalue` into a `
{#if isHydratable}
{:else}
{count}
{/if}
```
Do **NOT** declare `isHydratable` as a user-controlled prop; instead, treat it as a read-only input from the framework.
### Unique ids with `$props.id()`
For a unique, SSR-stable id inside an island, use Svelte's native [`$props.id()`]() — the value generated during the server render is reused on hydration:
```svelte
```
Each component instance gets its own id, so repeating the same island on a page never produces duplicate DOM ids. It also works inside server islands: their standalone renders are namespaced with the island id carried inside the signed props envelope (via render's `idPrefix`), so ids from a deferred fragment cannot collide with ids already on the page.
### `mochi:hydrate:visible`
Use `mochi:hydrate:visible` to defer hydration until the component scrolls into view. The component still server-renders; only its JS (and CSS) load on first intersection.
```svelte
```
Pass `rootMargin` to start loading before the component enters the viewport. See `Lazy hydration with mochi:hydrate:visible` for the full options.
Islands that use `:visible` require JS to apply their styles — per-component CSS is loaded alongside the bundle on intersection, not in the initial page ``. If you need the island to look correcft on initial SSR load, do not use `:visible`.
### `mochi:defer`
Use `mochi:defer` to render the component on a separate request after the page ships, and combine it with `mochi:hydrate` to also hydrate the deferred markup once it lands. See `Server islands with mochi:defer` for the full lifecycle.
```svelte
```