Astro, un framework orienté composants

Les frameworks JavaScript modernent tendent à adopter une architecture orientée composant. C’est aussi le cas d’Astro, qui offre un système de composants particulièrement puissant. Les composants combinent des templates HTML, du style, du JavaScript client et serveur, et bien sûr la possibilité de combiner plusieurs composants entre eux.

Anatomie d’un composant Astro

Un composant Astro peut contenir :

1. Un template HTML
2. Des styles scopés
3. Des scripts JavaScript exécutés côté client
4. Une logique JavaScript exécutée côté serveur
5. Des composants imbriqués : d’autres composants Astro ou alors des composants conçus avec d’autres frameworks (ilôts interactifs)

Astro n’utilise pas la syntaxe JSX comme React par exemple, mais son fonctionnement reste très proche.

Chaque composant est défini dans un fichier .astro et devient automatiquement l’export par défaut de ce fichier.

Construisons maintenant ensemble un composant Astro de plus en plus complexe.

1. Un composant Astro basique

---
// src/components/Article.astro
const title = "Mon Article"
---
<div>
    <h1>{title}</h1>
</div>

Cet exemple simple démontre la syntaxe de base. On peut définir des variables JavaScript dans le frontmatter (la partie entre les code fences ”---”).

Le frontmatter est exécuté côté serveur uniquement, et non pas dans le navigateur. Il faut garder en tête qu’Astro est avant tout un générateur de sites statiques, qui privilégie par défaut le rendu côté serveur.

Les variables JavaScript définies dans le frontmatter peuvent être utilisées dans le template en utilisant des accolades ({}). Cela ressemble fortement à la syntaxe JSX de React.

2. Ajout de styles et de scripts

Les composants peuvent inclure des styles et du JavaScript côté client :

---
const title = "Mon Blog"
---
<div>
    <h1>{title}</h1>
</div>
<script>
    console.log("S'affiche dans la console du navigateur")
</script>
<style>
    h1 {
        color: violet;
    }
</style>

La balise <style> “scope” automatiquement le code CSS, c’est-à-dire que les titres H1 de ce composant seront violets, mais pas les titres H1 de ses parents ni de ses enfants. Cela permet de raisonner composant par composant.

On peut bien sûr aussi définir du style global si besoin en utilisant des fonctionnalités plus avancées, sous la forme de directives.

La balise <script> ajoute des fonctionnalités côté client qui s’exécutent dans le navigateur. Si un script devient trop complexe, c’est là que l’on peut envisager d’utiliser une librairie frontend comme React, Vue, Svelte, Solid… en plus des composants Astro.

3. Composition de composants

On ne parle pas de “composants” pour rien : tout leur intérêt est de pouvoir être “composés”, comme des legos que l’on emboîte pour aboutir au résultat final.

On peut mélanger (relativement) librement des composants Astro et des composants implémentés avec d’autres librairies frontend, qui formeront des îlots interactifs ou client islands.

---
import UnComposantAstro from './UnComposantAstro.astro'
import { UnComposantReact } from "./UnComposantReact.jsx"
const title = "Mon Blog"
---
<div>
    <h1>{title}</h1>
    <UnComposantAstro foo="bar" />
    <UnComposantReact foo="bar" client:load />
</div>

La directive client:load indique à Astro d’hydrater le composant React côté client. Sans cela, il ne sera rendu que côté serveur, à la manière d’un React Server Component dans Next.js.

Des composants tout en un

L’avantage des composants Astro par rapport à React est leur capacité à tout inclure : logique de rendu serveur, template HTML, styles CSS, et code interactif côté JavaScript.

Leur avantage par rapport à un langage purement serveur comme PHP est la possibilité de mélanger des composants rendus côté serveur et des îlots interactifs (React, Vue, Svelte etc.) de manière transparente.

Astro permet donc de profiter pleinement d’une architecture orientée composants pour créer des interfaces graphiques complexes à partir de blocs simples et réutilisables.