Framework Astro
Aperçu
Astro est un framework web qui n'envoie aucun JavaScript au client par défaut. Il utilise une architecture basée sur les composants et prend en charge plusieurs frameworks frontend (React, Vue, Svelte, etc.) dans un même projet.
Processus
1. Configuration du projet
npm create astro@latest
# Choisir un modèle (blog, docs, portfolio, etc.)
# Installer les dépendances
2. Créer des pages
- Les pages vont dans
src/pages/ - Routage basé sur les fichiers
- Prise en charge des routes dynamiques avec la syntaxe
[param]
3. Composants
- Créer des composants réutilisables dans
src/components/ - Utiliser n'importe quel framework pris en charge (--- astro/react/vue/svelte ---)
- Partager l'état avec Nano Stores
4. Données et contenu
- Utiliser Content Collections pour du contenu typé en Markdown/MDX
- Récupérer les données au moment de la construction avec
getStaticPaths - Se connecter à des bases de données, APIs, CMS
5. Déploiement
- Déployer sur Vercel, Netlify, Cloudflare Pages ou tout adaptateur
- Build avec
npm run build - SSR disponible si nécessaire avec
output: 'server'
Exemples
- Blog : Content Collections + Markdown + flux RSS
- Page d'accueil : Génération statique + hydratation partielle
- Documentation : Intégration du thème Starlight
- E-commerce : SSR + base de données + intégration de paiement
Limitations
- Pas idéal pour les applications hautement interactives (utiliser Next.js à la place)
- Gestion d'état côté client limitée sans Nano Stores
- Le SSR ajoute de la complexité - ne l'utiliser que lorsque nécessaire
- Certaines bibliothèques React ne fonctionnent pas bien avec l'architecture "Îles"