Le développement Web, comme la plupart des technologies, évolue par vagues et par cycles. Les sites Web statiques étaient tout ce que nous avions au début. Mais, très vite, les développeurs ont hacké ensemble les premiers sites générés par serveur grâce à Perl et PHP. C’était l’avancée qui allait éventuellement lancer des frameworks comme Laravel, Django ou Rails.
Les appareils mobiles viendraient changer la façon dont les gens consomment le Web. Adieu les sites Web générés par le serveur, bonjour les applications rendues par le client. La prochaine vague a apporté des frameworks qui pourraient offrir aux utilisateurs une expérience plus semblable à une application, sans recharges, comme React ou AngularJS.
Bien que les applications d’une seule page offrent une expérience plus fluide, elles ont leurs inconvénients. À savoir, des chargements de page plus longs causés par tout le JavaScript supplémentaire qui doit être analysé et exécuté. Sans parler de tout le travail qu’il a fallu pour l’optimiser pour les moteurs de recherche.
Astro est un excellent exemple de la vague actuelle dans laquelle nous nous trouvons depuis Next.js, nous faisant boucler la boucle : un framework Web qui combine le rendu serveur et client pour obtenir le meilleur des deux mondes.
Qu’est-ce qu’Astro ?
Astro est un framework open source permettant de générer des applications Web en plus des frameworks d’interface utilisateur populaires tels que React, Preact, Vue ou Svelte. Une page Astro est composée de plusieurs composants indépendants. Pour améliorer les temps de chargement, Astro supprime tous les pages JavaScript et prérendues du serveur, à moins que les développeurs ne marquent un composant comme interactif, auquel cas Astro enverra la quantité minimale de JavaScript requise pour l’interactivité.
Astro favorise la génération de sites statiques et rendus par le serveur sans JavaScript dans le navigateur. Les développeurs peuvent opter pour le rendu côté client pour des itinéraires ou des parties de page donnés.
Grâce à cette stratégie, les pages Astro se chargent rapidement, car aucun JavaScript n’a besoin d’être exécuté pour le premier rendu. Dans un processus appelé hydratation, Astro va « verser » du JavaScript dans les composants pour les rendre dynamiques.
Premiers pas avec Astro
Pour démarrer avec Astro, installez Node version 16.12.0 ou supérieure et exécutez la commande suivante. Suivez l’assistant à l’écran et choisissez de créer un projet vide lorsque vous y êtes invité :
$ npm create astro@latest
astro v1.9.1 Launch sequence initiated.
✔ Where would you like to create your new project? … awesome-website
✔ How would you like to setup your new project? › an empty project
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Relaxed
✔ TypeScript settings applied!
next Liftoff confirmed. Explore your project!Ensuite, vous pouvez démarrer le site Web en mode développeur en entrant dans le répertoire du projet que vous venez de créer et en exécutant : npm run dev et visiter http://localhost:3000.
Pages et itinéraires
Les choses intéressantes dans Astro se passent à l’intérieur du src dossier. En vérifiant ce qui s’y trouve, nous voyons un seul répertoire appelé pages avec un index.astro déposer.
Les pages Astro sont un mélange de HTML, Javascript ou TypeScript. C’est la valeur par défaut index.astro:
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="https://dzone.com/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>Vous avez peut-être remarqué que les fichiers Astro commencent par des clôtures délimitées par ---. Quel que soit le code que nous mettons à l’intérieur de ces clôtures, il est exécuté sur le serveur et pré-rendu avant de servir la page.
Sous le frontmatter, on retrouve le contenu de cette route, un formulaire HTML augmenté qui permet des variables. On peut par exemple définir une variable dans le frontmatter et l’utiliser en HTML comme ceci :
---
// src/pages/index.astro
const title = "Astro";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="https://dzone.com/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
</body>
</html>Astro utilise un routage basé sur les fichiersdonc chaque fichier du pages dossier est mappé à un itinéraire sur le site Web. Par exemple, si nous créons un fichier appelé greetings.astronous devrions voir son contenu à http://localhost:3000/greetings:
---
const greeting = "Hello, world!";
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="https://dzone.com/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>{greeting}</h1>
</body>
</html>En plus de .astro fichiers, Astro peut analyser les fichiers Markdown, MDX, JSX JavaScript et TypeScript. Par exemple, si nous voulons écrire un article de blog dans Markdown, nous créons un post.md déposer sous le pages dossier. La visite de l’itinéraire obligera Astro à le convertir en HTML à la volée :
---
title: 'Learning Astro'
pubDate: 2023-01-10
description: 'A post written in Markdown.'
author: 'Tommy'
---
# Learning Astro
This Markdown file should be rendered as HTML when I visit http://localhost:3000/postComposants
Les composants Astro sont *.astro fichiers avec code réutilisable et HTML. Nous pouvons utiliser des composants pour écrire des éléments tels que des en-têtes, des pieds de page, des barres de navigation, des boutons et des formulaires. Tout ce qui peut être exprimé en HTML peut constituer un composant.
Créons notre premier composant dans src/components/Header.astro:
---
// src/components/Header.astro
---
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="https://dzone.com/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator"
<title>Astro</title>Une fois défini, nous pouvons l’importer dans n’importe quelle page (ou d’autres composants) et l’utiliser comme ceci :
---
import Header from "../components/Header.astro";
---
<html lang="en">
<head>
<Header />
</head>
<body>
</body>
</html>Les composants Astro ne sont pas différents des pages. Tout code défini entre les clôtures est exécuté sur le serveur. JavaScript est supprimé avant d’envoyer le contenu au navigateur.
Dispositions
Les mises en page sont utilisées pour affiner les structures d’interface utilisateur réutilisables. Ce sont techniquement des composants, donc la syntaxe reste la même.
Remplaçons le contenu de index.astro avec une mise en page :
---
// src/pages/index.astro
import SiteLayout from "../layouts/SiteLayout.astro";
---
<SiteLayout></SiteLayout>Comme vous pouvez le voir, les mises en page sont stockées dans le src/layouts dossier par convention.
Les mises en page, comme les composants, peuvent inclure d’autres composants. Ici, nous avons extrait la structure en index.astro et ajouté un Footer composant:
---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---
<html lang="en">
<head>
<Header />
</head>
<body>
<Footer />
</body>
</html>Accessoires et machines à sous
Jusqu’à présent, notre site Web était complètement statique. Pour transmettre des données entre les pages et les composants, nous devons comprendre comment accessoires et fentes travail.
Les composants et les mises en page peuvent définir et accepter des accessoires (abréviation de propriétés) via le global Astro.props. Les valeurs transmises via les props sont accessibles au composant avant le rendu.
Nous pouvons lire les accessoires dans notre composant comme ceci :
---
// src/components/Header.astro
const { title } = Astro.props;
---
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="https://dzone.com/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator"
<title>{title}</title>La valeur de title peut être fourni lorsque le composant est appelé, ce qui, dans l’exemple suivant, se produit via le SiteLayout mise en page:
---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---
<html lang="en">
<head>
<Header title = "Welcome my Astro Blog!" />
</head>
<body>
<Footer />
</body>
</html>Note: vous avez besoin d’espaces entourant le signe égal, c’est-à-dire, title="Hello" n’est pas correcte. Au lieu de cela, il devrait être : title = "Hello".
Les éléments slot créent des espaces réservés pour le contenu à injecter ultérieurement. Pour voir comment cela fonctionne, nous pouvons ajouter un <slot /> élément dans src/layouts/SiteLayout.astro:
---
// src/layouts/SiteLayout.astro
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---
<html lang="en">
<head>
<Header title = "Welcome my Astro Blog!" />
</head>
<body>
<slot />
<Footer />
</body>
</html>Maintenant, le HTML à l’intérieur <SiteLayout> est injecté au point où se situe la fente :
---
// src/pages/index.astro
import SiteLayout from "../layouts/SiteLayout.astro";
---
<SiteLayout>
<p>This content is rendered in the slot</p>
</SiteLayout>L’imbrication des composants, des mises en page, des accessoires et des emplacements nous donne la flexibilité de créer des fichiers d’interface utilisateur réutilisables sur le site Web.
Îles et hydratation
Jusqu’à présent, nous n’avons envoyé aucun code JavaScript à l’utilisateur ; tout est pré-rendu et servi en pur HTML + CSS. Comment faisons-nous pour qu’Astro envoie du JavaScript au navigateur ? Pour cela, nous devons comprendre le architecture des îles.
Le modèle d’architecture en îlot vise à réduire la quantité de JavaScript nécessaire côté navigateur. Moins…