Astro-Framework
Überblick
Astro ist ein Web-Framework, das standardmäßig kein JavaScript an den Client ausliefert. Es verwendet eine komponentenbasierte Architektur und unterstützt mehrere Frontend-Frameworks (React, Vue, Svelte usw.) im selben Projekt.
Ablauf
1. Projekt einrichten
npm create astro@latest
# Vorlage wählen (Blog, Docs, Portfolio usw.)
# Abhängigkeiten installieren
2. Seiten erstellen
- Seiten werden in
src/pages/abgelegt - Dateibasiertes Routing
- Unterstützung für dynamische Routen mit
[param]-Syntax
3. Komponenten
- Wiederverwendbare Komponenten in
src/components/erstellen - Beliebiges unterstütztes Framework verwenden (--- astro/react/vue/svelte ---)
- Zustand mit Nano Stores teilen
4. Daten & Inhalte
- Content Collections für typsicheres Markdown/MDX verwenden
- Daten zur Build-Zeit mit
getStaticPathsabrufen - Anbindung an Datenbanken, APIs, CMS
5. Deployment
- Deployment zu Vercel, Netlify, Cloudflare Pages oder einem beliebigen Adapter
- Build mit
npm run build - SSR bei Bedarf mit
output: 'server'verfügbar
Beispiele
- Blog: Content Collections + Markdown + RSS-Feed
- Landing Page: Statische Generierung + partielle Hydrierung
- Dokumentation: Starlight-Theme-Integration
- E-Commerce: SSR + Datenbank + Zahlungsintegration
Einschränkungen
- Nicht ideal für stark interaktive Apps (hier Next.js verwenden)
- Client-seitiges State-Management ohne Nano Stores eingeschränkt
- SSR erhöht die Komplexität – nur bei Bedarf einsetzen
- Manche React-Bibliotheken funktionieren mit der Insel-Architektur nicht gut