Les îles Astro
Astro a mis au point et popularisé une architecture frontale appelée Islands. L’architecture Islands permet d’améliorer les performances frontales en évitant les modèles JavaScript monolithiques et en supprimant automatiquement tout JavaScript non essentiel de la page. Les développeurs continuent d’utiliser leurs composants d’interface utilisateur et frameworks préférés avec Astro et bénéficient toujours de ces avantages.
Un peu d’histoire
Titre de la section Un peu d’histoireLe terme “component island” a été inventé pour la première fois par l’architecte frontend d’Etsy Katie Sylor-Miller en 2019. Cette idée a ensuite été développée et documentée dans ce billet par le créateur de Preact, Jason Miller, le 11 août 2020.
L’idée générale d’une architecture “Islands” est faussement simple : rendre les pages HTML sur le serveur, et injecter des placeholders ou des slots autour des régions hautement dynamiques […] qui peuvent ensuite être “hydratés” sur le client en petits widgets autonomes, en réutilisant leur HTML initial rendu par le serveur.
Jason Miller, créateur de Preact
La technique sur laquelle repose ce modèle architectural est également connue sous le nom d’hydratation partielle ou sélective.
En revanche, la plupart des frameworks web basés sur JavaScript hydratent et rendent un site web entier sous la forme d’une grande application JavaScript (également connue sous le nom d’application à page unique, ou SPA). Les SPA offrent simplicité et puissance, mais souffrent de problèmes de performance lors du chargement des pages en raison de l’utilisation intensive de JavaScript côté client.
Les SPA ont leur place, même intégrées dans une page Astro. Mais les SPA n’ont pas la capacité native d’hydrater de manière sélective et stratégique, ce qui en fait un choix lourd pour la plupart des projets sur le web aujourd’hui.
Astro est devenu populaire en tant que premier framework web JavaScript grand public avec une hydratation sélective intégrée, en utilisant ce modèle d’îlots de composants inventé par Sylor-Miller.
Qu’est-ce qu’un îlot ?
Titre de la section Qu’est-ce qu’un îlot ?Dans Astro, un “îlot” fait référence à tout composant d’interface utilisateur interactif sur la page. Pensez à un îlot comme à un widget interactif flottant dans une mer de HTML statique, léger et rendu par le serveur.
Contenu statique comme du texte, des images, etc.
Source: Islands Architecture: Jason Miller
Un îlot fonctionne toujours de manière isolée par rapport aux autres îlots de la page, et plusieurs îlots peuvent exister sur une même page. Les îlots peuvent toujours partager des états et communiquer entre eux, même s’ils s’exécutent dans des contextes de composants différents.
Cette flexibilité permet à Astro de prendre en charge plusieurs frameworks d’interface utilisateur tels que React, Preact, Svelte, Vue et SolidJS. Comme ils sont indépendants, vous pouvez même mélanger plusieurs frameworks sur une même page.
Créer une île
Titre de la section Créer une îlePar défaut, Astro rendra automatiquement chaque composant de l’interface utilisateur en HTML et CSS, en supprimant automatiquement tout JavaScript côté client.
<MyReactComponent />Cela peut sembler strict, mais c’est ce comportement qui permet aux sites Astro d’être rapides par défaut et qui protège les développeurs contre l’envoi accidentel de JavaScript inutiles ou non désirés qui pourraient ralentir leur site web.
Transformer n’importe quel composant statique de l’interface utilisateur en un îlot interactif ne nécessite qu’une directive client:*. Astro construit et regroupe alors automatiquement votre JavaScript côté client pour optimiser les performances.
<!-- Ce composant est désormais interactif sur la page ! Le reste de votre site web reste statique --><MyReactComponent client:load />Avec Islands, le JavaScript côté client n’est chargé que pour les composants interactifs explicites que vous marquez à l’aide des directives client:*.
Et comme l’interaction est configurée au niveau du composant, vous pouvez gérer différentes priorités de chargement pour chaque composant en fonction de son utilisation. Par exemple, client:idle indique à un composant de se charger lorsque le navigateur devient inactif, et client:visible indique à un composant de ne se charger qu’une fois qu’il entre dans la fenêtre de visualisation.
Quels sont les avantages des îles ?
Titre de la section Quels sont les avantages des îles ?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 éléments 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 client spéciale 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 n’hydrate que ce qui est nécessaire sur la page et laisse 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 !
Learn