Astro est une nouvelle approche de la ferveur actuelle de JavaScript : extraire plus de performances des frontaux réactifs. Il est développé par la même équipe qui a créé l’outil de construction Snowpack.

Il y a eu plusieurs tentatives pour améliorer les performances en évitant la prélecture et l’amorçage coûteux qui ont affligé les frameworks de type React. C’est le fameux problème d’hydratation décrit ici.

Astro adopte une approche intéressante et nouvelle. Il s’agit d’un système de construction qui vous permet d’utiliser le framework de votre choix (React, Svelte, Vue, etc.), puis de rechercher où le chargement paresseux peut être le mieux utilisé. Vous pouvez considérer cela comme une sorte de fractionnement de code intelligent appliqué à votre application au moment du bundle.

Ainsi, vous pouvez utiliser le même cadre familier que vous utilisez actuellement, mais vous bénéficiez également d’énormes avantages en termes de performances.

Architecture des îles

L’architecture Web qu’Astro propose de fournir est parfois appelée architecture des îles. L’idée centrale est que les îles sont vos composants interactifs dépendant de JavaScript, entourés d’un balisage HTML/CSS pur.

En découpant l’application de cette manière, vous pouvez expédier tout le code HTML directement au navigateur, de sorte que l’utilisateur ait quelque chose avec quoi interagir, tandis que les parties dépendant de JavaScript ne peuvent être chargées qu’en cas de besoin. Vous pouvez même dire à Astro de différer le JavaScript jusqu’à ce qu’un composant soit visible pour l’utilisateur, comme vous le verrez ci-dessous.

Travailler avec Astro

Commençons à nous familiariser avec Astro en utilisant le bac à sable en ligne. Cliquez ici pour l’ouvrir.

Cette URL affichera une page simple, nommée Page.astro, avec un horodatage. Notez comment la page (Liste 1) est divisée en deux sections. La première section, désignée par le premier triple tiret (---), contient le code qui sera exécuté sur le serveur au moment de la génération, et non pendant l’exécution. La deuxième section, désignée par le deuxième triple tiret, contient le balisage à livrer au moment de l’exécution.

Liste 1. Bac à sable Astro simple

---
import {format} from 'date-fns';
// Welcome to Astro!
// Write JavaScript & TypeScript here, in the "component script."
// This will run during the build, but never in the final output.
// Use these variables in the HTML template below.
//
// Full Syntax:
// https://docs.astro.build/core-concepts/astro-components/
const builtAt: Date = new Date();
const builtAtFormatted = format(builtAt, 'MMMM dd, yyyy -- H:mm:ss.SSS');
---

  
    
    
    
  
  
    

      






      
Hello, Astro!

      

        RENDERED AT:

        {builtAtFormatted}
      

    

  

Remarquez comment le {builtAtFormatter} est utilisé pour référencer la variable de temps de construction dans le balisage.

Ajouter un composant dans Astro

Ajoutons maintenant un composant. Cliquez sur l’icône plus dans la barre de fichiers en haut, comme illustré à l’image 1.

Image 1. Ajouter un composant

IDG

Votre nouveau composant recevra un nom par défaut (Component1.astro) et un contenu, comme indiqué dans le Listing 2.

Liste 2. Composant1.astro

---
const name = "Component"
---
Hello {name}

Là encore, nous avons une affectation et un affichage simples des variables. Utilisons le composant dans la page principale.

Retour à Page.astro. Notez que le système a utilement inséré une importation dans le segment JavaScript :

 import Component from '@/Component.astro';

Vous pouvez utiliser ce composant en insérant dans le balisage. Faites cela et vous verrez la sortie du composant enfant dans la fenêtre d’aperçu.

Utiliser des frameworks avec Astro

La superpuissance d’Astro est sa prise en charge d’une variété d’autres frameworks. Pour ce faire, il utilise leurs moteurs de rendu pendant le processus de construction et les compile en “îlots” de composants. Voyons comment cela fonctionne.

Si vous ouvrez ce lien, vous verrez une application Astro exécutant un composant Svelte. (Voici un exemple démontrant plusieurs moteurs de rendu.)

La première chose à remarquer dans la démo Svelte liée ci-dessus est le fichier astro.config.mjs. Le contenu de ce fichier ressemblera à quelque chose comme Listing 3.

Listing 3. Activer le moteur de rendu Svelte

export default /** @type {import('astro').AstroUserConfig} */ ({
  // Enable the Svelte renderer to support Svelte components.
  renderers: ['@astrojs/renderer-svelte'],
});

Le Listing 3 vous montre comment activer Svelte, afin que le moteur comprenne les composants Svelte. Nous pouvons maintenant importer un fichier Svelte directement dans le fichier Astro. Par exemple, ajoutons cette ligne à /pages/index.astro :

import Counter from '../components/Counter.svelte

Nous pouvons maintenant utiliser le compteur de Svelte dans Astro, comme indiqué dans le Listing 4.

Listing 4. Utilisation d’un composant Svelte dans Astro

   
Hello, Svelte!

Bien qu’il s’agisse d’une utilisation typique de Svelte, notez qu’il existe une propriété spécifique à Astro sur le compteur : client:visible. Cela signifie que le composant ne sera chargé dans le client que s’il est visible sur la page. Ainsi, il réalise un chargement paresseux granulaire avec un minimum d’effort.

Au moment de la rédaction, Astro prend en charge Svelte, React, Vue, Solid, Preact et Lit. Le processus pour les utiliser est comme avec Svelte. En fait, vous pouvez activer plusieurs moteurs de rendu et les utiliser côte à côte dans votre application Astro.

En plus des intégrations, Astro met également à disposition plusieurs thèmes et starters.

Affiner l’hydratation partielle avec Astro

Vous avez vu le client:visible directive en action. Il y en a d’autres disponibles. Dans chaque cas, la directive indique d’abord à Astro de rendre le composant sur le client avec son JavaScript associé, au lieu de faire un rendu de serveur et d’envoyer le HTML. Ensuite, il indique à Astro comment hydrater le composant.

Directeurs de clientèle Astro

Les directives client d’Astro contrôlent la façon dont les composants sont hydratés sur la page.

• : Hydrate le composant au chargement de la page.
• : Hydrate le composant dès que le fil principal est libre (utilise requestIdleCallback()).
• : Hydrate le composant dès que l’élément entre dans la fenêtre (utilise IntersectionObserver). Utile pour le contenu plus bas sur la page.
• : Hydrate le composant dès que le navigateur correspond à la requête média donnée (utilise matchMedia). Utile pour les bascules de la barre latérale ou d’autres éléments qui ne doivent s’afficher que sur les appareils mobiles ou de bureau.
• : Hydrate le composant lors du chargement de la page, rendu uniquement sur le client. Prend le cadre du composant sous forme de chaîne (par exemple, "svelte").

L’approche du temps de construction

Parce qu’Astro est fondamentalement un outil de construction, il a un contrôle total sur ce qui est finalement envoyé au navigateur de l’utilisateur. Cela signifie qu’en plus de faire des choses intelligentes avec JavaScript chargé paresseux, Astro peut être intelligent sur la façon dont il fournit d’autres actifs comme CSS.

De plus, l’objectif d’Astro est de distiller autant de JavaScript que possible en HTML pur, ce qui signifie moins de données sur le fil, moins de désabonnement du navigateur et un temps d’interactivité plus rapide.

Dans l’ensemble, bien qu’Astro soit certes plus orienté vers les sites statiques, c’est une approche prometteuse et innovante – et un projet très actif, avec près de 16 000 étoiles sur GitHub.