Données hydratables

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 :

<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.

Pour corriger l’exemple ci-dessus :

<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 :

import { import hydratablehydratable } from 'svelte';
const const rand: anyrand = import hydratablehydratable('random', () => var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.
Math.Math.random(): number
Returns a pseudorandom number between 0 and 1.
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

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, 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 :

<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}