---
title: 'Hydratable values'
slug: hydratable
description: 'Serialize computed server values into the page so the client can reuse them without re-running the work.'
---
## Hydratable values (experimental)
> hydratable support is experimental, please create an issue if you find problems! 🙇
Svelte 5's [`hydratable(key, fn)`](https://svelte.dev/docs/svelte/svelte#hydratable) computes a value on the server, serializes it into ``, and reads it back during client hydration instead of recomputing. Use it to avoid running the same async work twice when a hydrated component does data fetching at the top level.
Without it, the function runs once on the server and again during hydration:
```svelte
{user.name}
```
With it, the server result is reused on the client:
```svelte
{user.name}
```
Mochi already wires this up: any `hydratable()` call inside a `Mochi.page(...)` route or a `mochi:hydrate*` island is collected into the page's head script during SSR and picked up by Svelte's `hydrate()` automatically. There's no extra Mochi-side import — `hydratable` comes straight from `svelte`.
See it in action in the [Hydratable demo](/demos/hydratable/), where the page and a hydrated island share the same key — the server function runs once, both sides render the same value, and the island skips the async work on hydration.
**Namespace your keys.** Hydratable keys are global per-render. Prefix every key with your app or library name (`app:user`, `mylib:cart`) so two unrelated callers can't collide.
### Serialization
Values are serialized with [`devalue`](https://www.npmjs.com/package/devalue), so `Map`, `Set`, `Date`, `URL`, `BigInt`, and circular references all round-trip. Promises also work — Svelte stitches them back together on the client.
### Limitations in Mochi today
**Server islands.** `mochi:defer` server islands render in a separate request, and their `` output is not merged into the parent page. `hydratable()` calls inside a server island won't reach `window.__svelte.h` — keep them in the page or in eagerly hydrated islands for now.
**No CSP nonce wiring.** Mochi does not yet pass a `csp.nonce` through to Svelte's `render()`, so the inline lookup script will be blocked under strict `script-src` policies. Either allow `'unsafe-inline'` for scripts (which you likely already do for the island bootstrap) or wait for nonce plumbing.