Les îles Astro

Les îles Astro (aussi appelées îles de composants) sont un modèle d’architecture Web créé par Astro. L’idée d’une “architecture en îlots” a été lancée par l’architecte front-end d’Etsy Katie Sylor-Miller en 2019, et développée dans ce billet par le créateur de Preact, Jason Miller.

Le terme “île Astro” désigne un composant d’interface utilisateur interactif sur une page HTML autrement statique. Plusieurs îles peuvent exister sur une page, et une île est toujours rendue de manière isolée. Considérez-les comme des îles dans une mer de HTML statique et non interactif.

Source: Islands Architecture: Jason Miller

Dans Astro, vous pouvez utiliser n’importe quel framework d’interface utilisateur pris en charge (React, Svelte, Vue, etc.) pour rendre les îles dans le navigateur. Vous pouvez mélanger différents frameworks sur la même page, ou simplement choisir votre préféré.

La technique sur laquelle repose ce modèle architectural est connue sous le nom d’hydratation partielle ou sélective. Astro exploite cette technique en arrière-plan, en alimentant automatiquement vos îles.

Astro génère chaque site web sans aucun JavaScript côté client, par défaut. Utilisez un composant d’interface utilisateur front-end construit avec React, Preact, Svelte, Vue, SolidJS, AlpineJS, ou Lit et Astro le convertira automatiquement en HTML à l’avance, puis supprimera tout le JavaScript. Cela permet à chaque site d’être rapide par défaut en supprimant tout le JavaScript inutilisé de la page.

---
// Exemple : Utiliser un composant React statique sur la page, sans JavaScript.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100% HTML, zéro JavaScript chargé sur la page ! -->
<MyReactComponent />

Mais parfois, le JavaScript côté client est nécessaire pour créer une interface utilisateur interactive. Au lieu de forcer votre page entière à devenir une application JavaScript de type SPA, Astro vous demande de créer une île.

---
// Exemple : Utiliser un composant React dynamique sur la page.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- Ce composant est désormais interactif sur la page !
     Le reste de votre site web reste statique et sans JS. -->
<MyReactComponent client:load />

Avec les îles Astro, la grande majorité de votre site reste en HTML et CSS pur et léger. Dans l’exemple ci-dessus, vous venez d’ajouter un îlot d’interactivité unique et isolé sans modifier le reste de la page.

L’avantage le plus évident de construire avec les îles Astro est la performance : la majorité de votre site Web est convertie en HTML statique rapide et JavaScript n’est chargé que pour les composants individuels qui en ont besoin. JavaScript est l’un des actifs les plus lents à charger par octet, chaque octet est donc important.

Un autre avantage est le chargement parallèle. Dans l’exemple ci-dessus, l’îlot “carrousel d’images”, peu prioritaire, n’a pas besoin de bloquer l’îlot “en-tête”, hautement prioritaire. Les deux se chargent en parallèle et fonctionnent de manière isolée, ce qui signifie que l’en-tête devient immédiatement interactif sans avoir à attendre le carrousel plus lourd situé plus bas dans la page.

Mieux encore, vous pouvez indiquer à Astro comment et quand effectuer le rendu de chaque composant. Si le carrousel d’images est très coûteux à charger, vous pouvez joindre une directive spéciale client:* qui indique à Astro de ne charger le carrousel que lorsqu’il devient visible sur la page. Si l’utilisateur ne le voit pas, il ne se charge pas.

Dans Astro, c’est à vous, en tant que développeur, d’indiquer explicitement à Astro les composants de la page qui doivent également être exécutés dans le navigateur. Astro appliquera seulement ce qui est nécessaire sur la page et laissera le reste de votre site en HTML statique.

Les îles sont le secret de l’histoire de la performance rapide par défaut d’Astro !