Débuter avec Astro

Guide complet pour créer votre premier site avec Astro, le framework qui mise sur la performance et la simplicité.

Par Grégoire Boisseau • 10 janvier 2024

#astro#web#performance#javascript

Astro est un framework web moderne qui révolutionne la façon dont nous construisons des sites web. En se concentrant sur la performance et la simplicité, Astro permet de créer des sites ultra-rapides en générant du HTML statique par défaut et en chargeant du JavaScript uniquement quand c'est nécessaire.

Qu'est-ce qu'Astro ?

Astro est un générateur de sites statiques qui adopte une approche "ship less JavaScript". Contrairement à d'autres frameworks, Astro génère des pages HTML statiques par défaut et n'inclut du JavaScript côté client que lorsque vous en avez explicitement besoin.

Les avantages d'Astro

Performance exceptionnelle : Pages ultra-rapides grâce au HTML statique
Flexibilité : Utilisez React, Vue, Svelte ou du HTML/CSS vanilla
SEO optimisé : Rendu côté serveur par défaut
Simplicité : Syntaxe familière et apprentissage rapide

Installation et configuration

Pour commencer avec Astro, vous avez plusieurs options d'installation :

Création d'un nouveau projet

La méthode la plus simple est d'utiliser l'assistant de création :

npm create astro@latest

Ou avec yarn :

yarn create astro

L'assistant vous guidera dans la configuration :

Choisissez un nom pour votre projet
Sélectionnez un template (blog, portfolio, vide, etc.)
Décidez si vous voulez utiliser TypeScript
Configurez les intégrations (React, Vue, Tailwind, etc.)

Structure du projet

Une fois votre projet créé, vous obtenez une structure comme celle-ci :

mon-site-astro/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   ├── layouts/
│   └── pages/
│       └── index.astro
├── astro.config.mjs
└── package.json

Dossiers importants :

src/pages/ : Contient vos pages (routing automatique)
src/components/ : Vos composants réutilisables
src/layouts/ : Templates de page
public/ : Assets statiques (images, fonts, etc.)

Créer votre première page

Les fichiers .astro combinent HTML, CSS et JavaScript dans un seul fichier :

---
// Script côté serveur (frontmatter)
const title = "Ma première page Astro";
const items = ["HTML", "CSS", "JavaScript"];
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <ul>
      {items.map(item => <li>{item}</li>)}
    </ul>
  </body>
</html>

<style>
  h1 {
    color: #1474e0;
    font-size: 2rem;
  }
</style>

Syntaxe des composants Astro

Les composants Astro utilisent une syntaxe similaire à JSX mais avec quelques différences :

Les attributs HTML utilisent la casse habituelle (class, not className)
Vous pouvez mélanger du HTML statique et du contenu dynamique
Le CSS est scopé automatiquement au composant

Intégrer d'autres frameworks

Une des forces d'Astro est sa capacité à intégrer d'autres frameworks. Vous pouvez utiliser React, Vue, Svelte, et même les mélanger dans le même projet !

Ajouter React

npx astro add react

Puis utilisez vos composants React :

---
import MonComposantReact from '../components/MonComposant.jsx';
---

<html>
  <body>
    <h1>Page avec React</h1>
    <MonComposantReact client:load />
  </body>
</html>

Directives client

Les directives client contrôlent quand le JavaScript est chargé :

client:load : Charge immédiatement
client:idle : Charge quand le navigateur est inactif
client:visible : Charge quand l'élément devient visible
client:only : Ne rend que côté client

Déploiement

Astro génère des sites statiques qui peuvent être déployés partout :

Build de production

npm run build

Cela crée un dossier dist/ avec votre site optimisé.

Plateformes de déploiement

Netlify : Déploiement automatique depuis Git
Vercel : Intégration parfaite avec GitHub
GitHub Pages : Gratuit pour les projets open source
Cloudflare Pages : Performance mondiale

Bonnes pratiques

Performance

Utilisez les directives client à bon escient
Optimisez vos images avec @astrojs/image
Minimisez le JavaScript côté client

SEO

Utilisez des composants Layout pour les métadonnées
Générez un sitemap automatiquement
Optimisez vos balises HTML sémantiques

Ressources utiles

Pour aller plus loin avec Astro :

Conclusion

Astro représente une approche rafraîchissante du développement web moderne. En privilégiant la performance et la simplicité, il permet de créer des sites rapides et optimisés sans sacrifier l'expérience développeur.

Que vous construisiez un blog, un site vitrine ou une application complexe, Astro vous donne les outils pour créer des expériences web exceptionnelles. N'hésitez pas à expérimenter et à découvrir tout ce que ce framework a à offrir !