In den letzten Jahren hat sich die JavaScript-Framework-Landschaft erheblich erweitert. React, Vue, Next.js, Nuxt, SvelteKit - die Optionen sind nahezu unbegrenzt. Dennoch haben wir uns für Präsenzwebsites und Blogs für eine andere Wahl entschieden: Astro.
Ein Framework, das für Inhalte konzipiert wurde
Astro basiert auf einer einfachen Feststellung: Die meisten Websites müssen keine Megabytes an JavaScript an den Browser senden. Eine Präsenzwebsite, ein Portfolio, ein Blog - das sind im Wesentlichen statische Seiten, die mit einigen wenigen Interaktionen angereichert werden.
Während Next.js oder Nuxt clientseitig hydrierte Single Page Applications generieren, verfolgt Astro den entgegengesetzten Ansatz. Standardmäßig wird kein JavaScript an den Browser gesendet. Der HTML-Code wird beim Build generiert, und interaktive Komponenten werden nur geladen, wenn sie benötigt werden - durch ein System namens “Islands Architecture”.
Unschlagbare Performance in der Praxis
Beim Projekt ISM Lausanne haben wir bereits beim ersten Deployment einen Lighthouse-Score von 98/100 bei der Performance erzielt. Keine manuelle Optimierung, keine komplexe Cache-Konfiguration. Die statische Generierung erledigt die Arbeit.
Für KMU und Selbstständige bedeutet dies konkret:
- Quasi-sofortige Ladezeiten auf dem Mobilgerät, auch bei einer durchschnittlichen 4G-Verbindung
- Bessere Google-Platzierungen dank grüner Core Web Vitals
- Reduzierte Hosting-Kosten: Eine statische Website läuft auf jedem Server
Integration mit modernen CMS
Astro integriert sich nahtlos mit Content Collections, seinem nativen dateibasierten Content-Management-System. Für Projekte wie unseres ist das ideal: Inhalte werden zusammen mit dem Code versioniert, direkt bearbeitbar, ohne Datenbank-Wartung.
Für Kunden, die eine Admin-Oberfläche bevorzugen, unterstützt Astro nativ Sanity, Contentful, Strapi oder Decap CMS. Das Beste aus beiden Welten.
Mehrsprachigkeit ohne Probleme
Eine der wiederkehrenden Herausforderungen in unseren Projekten ist die Unterstützung mehrerer Sprachen. Mit unserer Astro-Konfiguration werden die Routen /fr/, /en/, /de/ automatisch aus einer einzigen Übersetzungsdatei generiert.
// Ein Aufruf, drei Sprachen
export async function getStaticPaths() {
const langs = ['en', 'de'];
return langs.flatMap(lang =>
posts.map(post => ({ params: { lang, slug: post.slug }, props: { post } }))
);
}
Astro ist nicht für jedes Projekt geeignet
Seien wir ehrlich: Astro ist nicht die richtige Antwort auf alles. Für komplexe Webanwendungen mit Authentifizierung, gemeinsamem Status und umfangreichen Interaktionen sind Next.js oder SvelteKit nach wie vor besser geeignet. Das ist tatsächlich der Stack, den wir für Projekte wie Basik Talents oder Média Formation verwenden.
Aber für eine professionelle Präsenzwebsite, ein Portfolio oder einen Unternehmens-Blog ist Astro unser Standard. Schnell zu entwickeln, schnell zu liefern, schnell für den Endnutzer.
Denken Sie über eine Neugestaltung Ihrer Website nach? Kontaktieren Sie uns, um den besten Ansatz für Ihre Bedürfnisse zu besprechen.