Bienvenue dans cette vidéo où je vous propose de découvrir Astro, un générateur de site, qui vient de passer en version 1.0 récemment.
00:00 Découverte d'Astro
04:21 Support du markdown
05:12 Le rendu statique
06:53 Le système d'îlot interactif
18:07 Autres fonctionnalités
19:05 Server side rendering
25:05 Mon avis
Encore un outil JavaScript !
Même s'il existe déjà de nombreux générateurs de site, Astro propose une approche intéréssante qui le rend intéréssant dans cet écosystème déjà chargé.
Un focus sur le rendu HTML
Le premier point particulier, par rapport à des solutions comme NextJS, est qu'il se focalise sur le rendu statique HTML et les pages n'utiliseront pas de JavaScript par défaut. Ces pages HTML peuvent être générées grâce à des fichiers .astro, des fichiers markdown ou en utilisant des librairies comme React, Svelte, Vue ou autre.
Les fichiers .astro permettront d'insérer du JavaScript au début du fichier pour effectuer de la logique (si nécessaire) pour récupérer des données lors de la compilation.
---
const projects = (await Astro.glob('./project/**/*.md'))
.filter(({ frontmatter }) => !!frontmatter.publishDate)
.sort(
(a, b) =>
new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf()
);
---
<section>
{projects.map((project) => <PortfolioPreview project={project} />)}
</section>Il est même possible d'utiliser fetch si on souhaite récupérer des données d'une API lors de la compilation
---
const todos = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=10').then(r => r.json())
---
<ul>
{todos.map((t) => (<li>{t.title}</li>))}
</ul>En dehors de cette particularité on retrouve à peu près les mêmes fonctionnalités qu'avec d'autres outils comme la possibilité d'utiliser des routes dynamiques ou un système de pagination.
Des îlots interactifs
Le principal argument de vente d'Astro est son système d'îlots qui permet de rendre certains éléments de la page interactif avec une hydratation côté client.
<Nav />
<SiteHeader />
<main>
<Counter client:load>
</main>L'utilisation de la directive client permet d'indiquer que le composant doit aussi être éxécuté côté client et Astro se chargera de délivrer le JavaScript nécessaire au fonctionnement du composant sur les pages où il est utilisé. Il est aussi possible de ne charger les composants que sous certaines conditions suivant l'importance de l'élément.
<BuyButton client:load /> <!-- Le composant se charge au chargement de la page -->
<BuyButton client:idle /> <!-- Le composant se charge lorsque le navigateur n'est plus occupé -->
<BuyButton client:visible /> <!-- Le composant se charge lorsque l'élément devient visible à l'écran -->
<BuyButton client:media="(max-width: 50em)" /> <!-- Le composant se charge en fonction d'une media query -->
<BuyButton client:only /> <!-- Le composant se charge seulement côté client -->Cette approche permet de limiter l'utilisation du JavaScript aux éléments qui en ont strictement besoin plutôt que de passer par une hydratation complète de la page comme peuvent le faire d'autre framework.
Du rendu côté serveur
Il est aussi possible d'opter pour un rendu côté serveur qui vous permettra dans ce cas d'accéder aux informations de la requête et de répondre en fonction de ce que vous recevez. Le système se repose alors sur la même API que le web avec les objets Request et Response.
export async function post ({request}) {
const data = await request.json();
return new Response(JSON.stringify({
success: `Bonjour ${data.firstname} ${data.lastname}`
}), {
status: 200,
headers: {
'Content-Type':'application/json'
}
})
}Vous pouvez alors choisir plusieurs adapters en fonction de l'environnement sur lequel vous souhaitez utiliser votre site. Par exemple, dans le cas de NodeJS il génèrera un fichier entry.mjs que vous pourrez inclure dans votre code serveur.
import http from 'http';
import { handler as ssrHandler } from './dist/server/entry.mjs';
http.createServer(function(req, res) {
ssrHandler(req, res, err => {
if(err) {
res.writeHead(500);
res.end(err.toString());
} else {
// Serve your static assets here maybe?
// 404?
res.writeHead(404);
res.end();
}
});
}).listen(8080);Pour quelle utilisation ?
Vous l'aurez compris, Astro revient à une approche plus classique dans la création de page web avec un rendu focalisé sur l'HTML et une navigation gérée par le navigateur plutôt que le "tout JavaScript". Cette approche conviendra assez bien aux cas de sites vitrine, portfolio, petit blog et documentations mais ne conviendra pas si vous avez besoin d'une navigation côté client ou si vous créez un site au format "application".
