5 nouvelles fonctionnalités à essayer dans Astro 2.5

AstroJS est un fantastique outil basé sur JavaScript utilisé pour créer des sites Web statiques ultra-rapides. Il vous permet de créer des sites Web à l'aide de plusieurs frameworks JavaScript tels que React, Vue et Svelte. Astro 2.5 apporte un tout nouvel ensemble de fonctionnalités dont certaines seront couvertes ici.

1. Collectes de données

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

Ensuite, configurez les collections dans src/content/config.ts en utilisant le définirCollection et z utilitaires de astro: contenu module et en définissant le type sur data.

importer { z, définirCollection } depuis"astro: contenu";
constante écrivains = définirCollection({
taper: "données",
schéma: z.objet({ nom:z.chaîne() }),
});

Enfin, exportez l'objet de collection pour enregistrer vos collections.

exporterconstante collections = {écrivains:écrivains}

2. Minification HTML

Astro 2.5 introduit l'option compressHTML qui supprime tous les espaces blancs (et les sauts de ligne) de votre code HTML. Les composants ne sont compressés qu'une seule fois par le compilateur Astro, puis lors de la construction. Ceci est fait pour réduire les coûts de performance.

Activer cette option dans votre projet est facile. Ajoutez simplement les lignes suivantes à votre fichier de configuration. La minification HTML ne fonctionne qu'avec des composants écrits au format de fichier .astro.

exporterdéfautdéfinirConfig({compressHTML:vrai})

3. Rendu parallélisé

Le rendu des composants en parallèle est une fonctionnalité attendue depuis longtemps dans Astro. Dans les cas où les composants enfants de différentes sous-arborescences 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 plus bas dans l'arborescence d'être rendu sans être bloqué par un composant de récupération de données plus haut dans l'arborescence. Pour le moment, le rendu parallèle ne fonctionne pas correctement avec tableau.map fragments asynchrones.

Astro 2.5 apporte également un tout nouvel ensemble de fonctionnalités expérimentales décrites ci-dessous.

4. Rendu hybride

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

Pour tirer parti du rendu hybride, définissez HybridOutput sur true dans la section expérimentale de votre configuration et ajoutez un adaptateur.

Cela pré-affichera l'intégralité de votre site par défaut, mais vous pouvez désactiver ce comportement en définissant le paramètre pré-rendre export de n'importe quel itinéraire ou page vers false :

exporterconstante pré-rendu = FAUX;

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 client:* directives.

Pour utiliser cette fonction, Activez experimental.customClientDirectives dans le fichier de configuration et minimisez les points d'entrée des directives pour éviter tout impact négatif sur l'hydratation des composants.

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

importer { ClientDirective } depuis"astro";
constante clickDirective: ClientDirective = (charge, opte, el) => {
fenêtre.addEventListener(
"Cliquez sur",
asynchrone () => {
constante hydrater = attendre charger();
attendre hydrater();
 },
 { une fois: vrai }
 );
};
exporterdéfaut cliquezDirective ;

Maintenant client: cliquez 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.

npm créer astro@dernier

Cela échafaudera un nouveau projet Astro à partir de zéro. Suivez les instructions à l'écran pour configurer les choses (si vous ne savez pas quoi choisir, suivez simplement 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 ajout astro. Si tout est correctement installé, vous pouvez ouvrir hôte local: 3000 sur votre machine, et vous devriez voir un message "Bienvenue sur Astro".

Si vous n'aimez pas NPM, vous pouvez opter pour d'autres Gestionnaires de packages 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 fluide que possible. C'est fantastique, la nature indépendante de l'interface utilisateur signifie que vous pouvez travailler avec n'importe quel framework JavaScript populaire de votre choix sans tracas.