AstroJS est un outil fantastique basé sur JavaScript utilisé pour créer des sites web statiques ultra-rapides. Il vous permet de créer des sites web en utilisant plusieurs frameworks JavaScript comme 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 à l’aide de la méthode defineCollection et z utilitaires de astro:content et en définissant le type comme étant des données.
import { z, defineCollection } from "astro:content";
const writers = defineCollection({
type: "data",
schema: z.object({ name: z.string() }),
});
Enfin, exportez l’objet collection pour enregistrer vos collections.
export const collections = {writers:writers}
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.
Activer cette option dans votre projet est facile. Il suffit d’ajouter les lignes suivantes à votre fichier de configuration. La minification HTML ne fonctionne qu’avec les composants écrits au format .astro.
export default defineConfig({compressHTML:true})
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 suivants array.map fragments asynchrones.
Astro 2.5 apporte également un ensemble de nouvelles fonctionnalités expérimentales qui sont décrites 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 profiter 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 désactiver ce comportement en définissant l’option prerender L’exportation d’une route ou d’une page à false :
export const prerender = false; 5. Directives client personnalisées
Astro 2.5 introduit l’API addClientDirective pour le contrôle personnalisé de l’hydratation des composants côté client à l’aide de directives personnalisées client:* directives.
Pour utiliser cette fonctionnalité, il faut activer experimental.customClientDirectives dans le fichier de configuration et de minimiser les points d’entrée des directives afin d’éviter tout impact négatif sur l’hydratation des composants.
Une fonction de type ClientDirective doit être exporté depuis votre fichier de directives client. Par exemple, le code suivant hydrate le composant au premier clic sur la fenêtre.
import { ClientDirective } from "astro";
const clickDirective: ClientDirective = (load, opts, el) => {
window.addEventListener(
"click",
async () => {
const hydrate = await load();
await hydrate();
},
{ once: true }
);
};
export default clickDirective;
Maintenant client:click peut être utilisé dans vos composants avec un support de type complet.
Comment installer Astro
Astro fournit une interface de ligne de commande (CLI) appelée créer astro pour commencer. Vous devez avoir NodeJS 16+ et npm installés sur votre machine.
npm create astro@latest 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 :
npm run dev
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.
