En Svelte, lorsque vous souhaitez rendre du contenu lié à des données asynchrones sur le serveur,
vous pouvez simplement les `await`. C'est génial ! Il y a cependant un écueil : lors de
l'hydratation côté client, Svelte doit refaire le travail asynchrone, ce qui bloque l'hydratation
d'autant de temps :

```svelte
<script>
  import { getUser } from 'my-database-library';

	// Ceci va récupérer l'utilisateur sur le serveur, rendre son nom dans le h1,
	// puis, lors de l'hydratation sur le client, récupérer _de nouveau_ l'utilisateur,
	// bloquant l'hydratation jusqu'à ce qu'il ait terminé.
  const user = await getUser();
</script>

<h1>{user.name}</h1>
```

C'est idiot. Si nous avons déjà fait ce travail coûteux de récupérer les données sur le serveur,
nous ne voulons pas le refaire lors de l'hydratation côté client. `hydratable` est une API bas
niveau construite pour régler ce problème. Vous n'en aurez probablement pas besoin souvent — elle
sera utilisée sous le capot par n'importe quelle librairie de récupération de données que vous
utiliserez. Par exemple, elle utilisée par les [fonctions distantes de
SvelteKit](/docs/kit/remote-functions).

Pour corriger l'exemple ci-dessus :

```svelte
<script>
  import { hydratable } from 'svelte';
  import { getUser } from 'my-database-library';

	// Lors du rendu côté serveur, ceci va sérialiser et stocker le résultat de `getUser`, l'associant
	// à la clé fournie et l'intégrant dans le contenu `head`. Lors de l'hydratation, Svelte va
	// chercher la version sérialisée, la renvoyant simplement plutôt que d'exécuter `getUser`. Après
	// hydratation, si `hydratable` est de nouveau appelée de nouveau, elle va simplement invoquer
	// `getUser`.
  const user = await hydratable('user', () => getUser());
</script>

<h1>{user.name}</h1>
```

Cette API peut également être utilisée pour fournir un accès à des valeurs aléatoires ou basées sur
le temps que l'on souhaite stables entre le rendu serveur et l'hydratation. Par exemple. pour
obtenir un nombre aléatoire qui ne change pas lors de l'hydratation :

```ts
import { hydratable } from 'svelte';
const rand = hydratable('random', () => Math.random());
```

Si vous êtes un•e auteur ou autrice de librairie, assurez-vous de préfixer les clés de vos valeurs
`hydratables` avec le nom de votre librairie afin que les clés ne rentrent pas en conflit avec
d'autres librairies.

## Sérialisation [!VO]Serialization

Toutes les données renvoyées par une invocation d'`hydratable` doivent être sérialisables. Mais cela
ne signifie pas que vous êtes limité•es au JSON — Svelte utilise
[`devalue`](https://npmjs.com/package/devalue), qui peut sérialiser toutes sortes de choses incluant
les `Map`, `Set`, `Url`, `BigInt`. Consultez la documentation pour obtenir la liste complète. En
plus, grâce à un peu de magie Svelte, vous pouvez également utiliser des promesses sans crainte :

```svelte
<script>
  import { hydratable } from 'svelte';
  const promises = hydratable('random', () => {
    return {
      one: Promise.resolve(1),
      two: Promise.resolve(2)
    }
  });
</script>

{await promises.one}
{await promises.two}
```