Pour s’imposer dans le monde des frameworks JavaScript, il faut innover. Astro ne déroge pas à cette règle et s’est illustré comme un framework innovant en introduisant une approche moderne de l’intégration des librairies frontend : les îlots clients (client islands).
Découvrons cette innovation plus en détail, avant de la comparer à une “bonne vieille balise script” ;)
Astro fonctionne comme un “méta-framework”, ce qui signifie qu’il peut intégrer de façon transparente différentes librairies et frameworks frontend : React, Vue, Svelte, Preact, Solid…
Un îlot client est un composant implémenté à l’aide de l’aide d’une telle librairie frontend et “hydraté” séparamment du reste de la page.
Ce qu’il faut retenir est qu’au lieu d’utiliser la librairie pour toute la page, Astro va isoler chaque composant, qui fonctionnera quasiment comme une application indépendante, formant une île interactive.
Cela ressemble aux micro-frontends, mais avec une approche plus intégrée au sein de l’application.
Les îlots clients représentent une stratégie d’optimisation fondamentale dans l’architecture d’Astro.
Sur le plan technique, les îlots sont des composants interactifs, utilisant du JavaScript client, mais isolés au sein d’une page par ailleurs statique, rendue côte serveur.
Le JavaScript ne “pollue” pas le reste de la page : le site se charge rapidement, et peut fonctionner en partie même si JavaScript est désactivé ou lent.
Cela est idéal pour les pages avec beaucoup de contenu, qui n’ont pas besoin de JavaScript partout : typiquement pour les sites e-commerce, blogs, presse etc.
Au-delà des performances, les îlots clients permettent aussi aux développeurs d’utiliser plusieurs frameworks UI au sein d’un même projet, donc de mixer React et Vue par exemple.
Cela est idéal pour migrer un site existant, pour utiliser un package qui n’existe que pour certaines librairies, ou encore pour organiser de grandes équipes de développeurs avec des compétences multiples.
On peut obtenir un fonctionnement similaire aux client islands dans Next.js, en couplant des React Server Components et des Client Components, mais uniquement pour React.
En tant qu’organisme de formation, l’intérêt d’Astro est qu’il nous permet d’enseigner le développement fullstack avec JavaScript à des développeurs venant de tous horizons, et non plus uniquement à des développeurs React comme cela est le cas pour Next.js.
Astro est un framework pragmatique, qui vous permet toujours de favoriser l’approche la plus simple pour atteindre votre objectif. Bien qu’il prenne en charge des intégrations complexes de frameworks, il n’impose pas leur utilisation.
Pour des composants simple, vous pouvez utiliser des balises <script> dans les composants Astro comme expliqué dans notre précédente ressource.
Les Web Components fonctionnent aussi très bien dans Astro, et n’ont pas besoin d’être des “client islands”, car ils sont déjà isolés.
Envisagez d’utiliser un framework frontend lorsque :
Restez avec une balise script lorsque :
Les îlots clients sont un avantage majeur d’Astro par rapport à d’autres frameworks fullstack JavaScript.
Vous pouvez aussi utiliser du JavaScript client directement dans vos composants Astro avec une balise script : c’est idéal pour les situations où un simple script suffit. Les Web Components peuvent aussi être utilisés de cette manière.
Pour aller plus loin :
Vous avez apprécié cette ressource ?
Découvrez toutes nos formations Next.js et Astro en présentiel ou en distanciel