5 nouveautés à essayer dans Astro 2.5

AstroJS est un outil fantastique basé sur JavaScript utilisé pour créer des sites web statiques super rapides. Il vous permet de créer des sites web en utilisant plusieurs frameworks JavaScript tels que React, Vue et Svelte. Astro 2.5 apporte un ensemble de nouvelles fonctionnalités dont certaines seront abordées ici.

1. Collections de données

Astro 2.5 prend désormais en charge le stockage de JSON et YAML dans des collections. La nouvelle propriété type : ‘data’ permet cette fonctionnalité. Pour le démontrer, créez une collection de données ‘writers’ dans le dossier src/content, où JSON ou YAML peuvent être ajoutés.

Ensuite, configurez les collections dans src/content/config.ts en utilisant le fichier defineCollection et z utilitaires de astro:content et en définissant le type comme étant des données.

Enfin, exportez l’objet collection pour enregistrer vos collections.

2. Minification HTML

Astro 2.5 introduit l’option compressHTML qui supprime tous les espaces blancs (et les sauts de ligne) de votre HTML. Les composants ne sont compressés qu’une seule fois par le compilateur Astro et ensuite pendant la construction. Cela permet de réduire les coûts de performance.

Il est facile d’activer cette option dans votre projet. Il suffit d’ajouter les lignes suivantes à votre fichier de configuration. La minification HTML ne fonctionne qu’avec les composants écrits dans le format de fichier .astro.

3. Rendu parallélisé

Le rendu des composants en parallèle est une fonctionnalité très attendue d’Astro. Dans les cas où des composants enfants situés dans des sous-arbres différents récupèrent des données, Astro 2.5 améliore les temps de chargement en récupérant les données en parallèle.

Cela permet à un composant situé plus bas dans l’arbre d’être rendu sans être bloqué par un composant récupérant des données plus haut dans l’arbre. Pour l’instant, le rendu parallèle ne fonctionne pas correctement avec les composants array.map fragments asynchrones.

Astro 2.5 apporte également un ensemble de nouvelles fonctionnalités expérimentales qui sont couvertes ci-dessous.

4. Rendu hybride

Astro 2.5 vous permet désormais de définir une nouvelle option de sortie serveur dans votre fichier de configuration qui remplace le comportement de pré-rendu par défaut de SSR.

Pour bénéficier du rendu hybride, définissez hybridOutput à true dans la section experimental de votre configuration et ajoutez un adaptateur.

Ce faisant, l’ensemble de votre site sera rendu par défaut, mais vous pouvez choisir de ne pas le faire en définissant l’option prerender de n’importe quelle route ou page à false :

5. Directives client personnalisées

Astro 2.5 introduit l’API addClientDirective pour le contrôle de l’hydratation des composants côté client à l’aide de directives client personnalisées. client:* personnalisées.

Pour utiliser cette fonction, activez experimental.customClientDirectives dans le fichier de configuration et maintenez les points d’entrée des directives à un niveau minimal afin d’éviter tout impact négatif sur l’hydratation des composants.

Une fonction de type ClientDirective doit être exportée depuis votre fichier de directives client. Par exemple, le code suivant hydrate le composant au premier clic sur la fenêtre.

Maintenant client:click peut être utilisé dans vos composants avec une prise en charge complète des types.

Comment installer Astro

Astro fournit une interface de ligne de commande (CLI) appelée créer astro pour vous aider à démarrer. Vous devez avoir NodeJS 16+ et npm installés sur votre machine.

Ceci va créer un nouveau projet Astro à partir de zéro. Suivez les instructions à l’écran pour configurer les choses (si vous n’êtes pas sûr de ce que vous devez choisir, utilisez les options recommandées). Suivant, cd dans le dossier du projet, puis exécutez :

Vous pouvez ajouter des frameworks comme React, en utilisant astro add. Si tout est installé correctement, vous pouvez ouvrir localhost:3000 sur votre machine, et vous devriez voir un message « Welcome to Astro ».

Si vous n’aimez pas NPM, vous pouvez opter pour d’autres gestionnaires de paquets JavaScript comme Yarn et PNPM.

Améliorer l’expérience des développeurs avec Astro

Les frameworks tout-en-un comme Astro rendent le développement de sites web rapides aussi facile que possible. Sa nature fantastique, agnostique de l’interface utilisateur, signifie que vous pouvez travailler avec n’importe quel framework JavaScript populaire de votre choix sans aucun problème.

S’abonner à notre newsletter