Architecture des îles
Astro a contribué à la création et à la popularisation d’un nouveau modèle d’architecture Frontend appelé Islands Architecture. L’architecture en îles fonctionne en rendant la majorité de votre page en HTML rapide et statique, avec de plus petits « îlots » de JavaScript ajoutés lorsque l’interactivité ou la personnalisation est nécessaire sur la page (un carrousel d’images, par exemple). Cela permet d’éviter les charges utiles JavaScript monolithiques qui ralentissent la réactivité de nombreux autres frameworks Web JavaScript modernes.
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 hydratation sélective intégrée, en utilisant le même modèle d’îlots de composants inventé par Sylor-Miller. Nous avons depuis élargi et fait évoluer le travail original de Sylor-Miller, qui a contribué à inspirer une approche similaire des îlots de composants pour le contenu rendu dynamiquement par le serveur.
Qu’est-ce qu’un îlot ?
Titre de la section Qu’est-ce qu’un îlot ?Dans Astro, un îlot est un composant d’interface utilisateur amélioré sur une page HTML par ailleurs statique.
Un îlot client est un composant d’interface utilisateur JavaScript interactif qui est hydraté séparément du reste de la page, tandis qu’un îlot serveur est un composant d’interface utilisateur dont le contenu dynamique est restitué par le serveur séparément du reste de la page.
Les deux îlots exécutent des processus coûteux ou plus lents de manière indépendante, pour chaque composant, afin d’optimiser le chargement des pages.
Composants de l’îlot
Titre de la section Composants de l’îlotLes composants Astro sont les éléments constitutifs de votre modèle de page. Ils se présentent sous la forme d’un code HTML statique, sans exécution côté client.
Considérez un îlot client comme un widget interactif flottant dans une mer de HTML statique, léger et rendu par le serveur. Des îlots serveur peuvent être ajoutés pour des éléments personnalisés ou dynamiques rendus par le serveur, tels que la photo de profil d’un visiteur connecté.
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.
Îlots client
Titre de la section Îlots clientPar 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.
Avantages des îlots de clients
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 côté client sont le secret de l’histoire de la performance rapide par défaut d’Astro !
Îlots serveur
Titre de la section Îlots serveurLes îlots de serveur sont un moyen de déplacer le code côté serveur coûteux ou lent hors du processus de rendu principal, ce qui permet de combiner facilement un HTML statique très performant et des composants dynamiques générés par le serveur.
Ajoutez la directive server:defer à n’importe quel composant Astro de votre page pour le transformer en son propre îlot de serveur :
---import Avatar from '../components/Avatar.astro' ;---<Avatar server:defer />Cela permet de diviser votre page en plus petites zones de contenu rendu par le serveur qui se chargent chacune en parallèle.
Le contenu principal de votre page peut être rendu immédiatement avec un contenu de remplacement, tel qu’un avatar générique, jusqu’à ce que le contenu de votre île soit disponible. Avec les îlots de serveurs, la présence de petits éléments de contenu personnalisé ne retarde pas le rendu d’une page par ailleurs statique.
Ce modèle de rendu a été conçu pour être portable. Il ne dépend d’aucune infrastructure de serveur et fonctionne donc avec n’importe quel hôte, qu’il s’agisse d’un serveur Node.js dans un conteneur Docker ou du fournisseur sans serveur de votre choix.
Avantages des îlots de serveurs
L’un des avantages des îlots de serveurs est la possibilité de rendre les parties les plus dynamiques de votre page à la volée. Cela permet à l’enveloppe extérieure et au contenu principal d’être mis en cache de manière plus agressive, ce qui permet d’obtenir des performances plus rapides.
Un autre avantage est d’offrir une excellente expérience aux visiteurs. Les îlots du serveur sont optimisés et se chargent rapidement, souvent avant même que le navigateur n’ait peint la page. Mais pendant le court laps de temps nécessaire au rendu de vos îlots, vous pouvez afficher un contenu de repli personnalisé et empêcher tout changement de mise en page.
Un exemple de site bénéficiant des îlots de serveurs Astro est une vitrine de commerce électronique. Bien que le contenu principal des pages de produits change rarement, ces pages comportent généralement des éléments dynamiques :
- L’avatar de l’utilisateur dans l’en-tête.
- Les offres spéciales et les ventes pour le produit.
- Les commentaires des utilisateurs.
En utilisant des îlots de serveur pour ces éléments, votre visiteur verra immédiatement la partie la plus importante de la page, votre produit. Les avatars génériques, les moteurs de chargement et les annonces du magasin peuvent être affichés en tant que contenu de secours jusqu’à ce que les éléments personnalisés soient disponibles.