Astro

Astro ist ein Web-Framework, das standardmässig statische HTML-Seiten erzeugt und kein JavaScript an den Browser schickt, ausser es wird explizit benötigt. Dieser Ansatz, den Astro "Zero JS by default" nennt, führt zu extrem schnellen Ladezeiten und hervorragenden Core Web Vitals.

Warum Astro wichtig ist

Die meisten modernen Web-Frameworks (Next.js, Nuxt, SvelteKit) sind für interaktive Web-Applikationen gebaut. Sie laden JavaScript-Bundles in den Browser, um dynamische Interfaces zu ermöglichen. Für Content-Websites, Blogs, Portfolios und Unternehmensseiten ist das in den meisten Fällen unnötig. Eine Über-uns-Seite braucht kein React-Bundle, um Text und Bilder anzuzeigen.

Astro dreht diese Logik um. Es rendert Seiten zum Build-Zeitpunkt zu statischem HTML. Interaktive Komponenten können gezielt als "Islands" eingebunden werden, die nur dort JavaScript laden, wo Interaktivität tatsächlich gebraucht wird. Das Ergebnis: Seiten, die innerhalb von Millisekunden vollständig geladen sind.

Für SEO und AEO ist das relevant, weil Google die Ladezeit als Ranking-Faktor verwendet und schnellere Seiten in der Regel besser ranken. LLMs crawlen primär HTML-Inhalte, die bei Astro-Seiten sofort und vollständig verfügbar sind.

Astro in der Praxis

Bei designtakt kommt Astro dann zum Einsatz, wenn ein Projekt maximale Performance und volle Gestaltungsfreiheit verlangt, aber kein visueller Editor für das Marketing-Team nötig ist. Typische Szenarien: eine Developer-Dokumentation, ein technisches Portfolio oder eine Content-lastige Website mit spezifischen Layout-Anforderungen, die über die Möglichkeiten von Webflow hinausgehen.

Die Kombination, mit der designtakt am häufigsten arbeitet, ist Astro als Frontend mit Sanity als Headless CMS. Sanity liefert die strukturierten Inhalte, Astro erzeugt daraus statische Seiten, die über ein CDN ausgeliefert werden. Das Ergebnis sind Websites mit Ladezeiten unter einer Sekunde und perfekten Lighthouse-Scores.

Was designtakt an Astro besonders schätzt: die Framework-Agnostik. In einem Astro-Projekt können Komponenten aus React, Svelte, Vue oder reinem HTML nebeneinander existieren. Das macht Astro flexibler als Frameworks, die an ein bestimmtes UI-Framework gebunden sind. Für ein Team, das mit verschiedenen Technologien arbeitet, ist das ein praktischer Vorteil.

Häufige Fragen zu Astro

Was ist der Unterschied zwischen Astro und Next.js?

Next.js ist primär ein React-Framework für interaktive Web-Applikationen. Es eignet sich hervorragend für Dashboards, SaaS-Produkte und Anwendungen mit viel clientseitiger Logik. Astro ist auf Content-Websites optimiert und liefert standardmässig kein JavaScript an den Browser. Für eine Unternehmenswebsite oder einen Blog ist Astro in der Regel die performantere Wahl, weil weniger Code geladen werden muss. Für eine komplexe Web-App mit viel Interaktivität ist Next.js die bessere Grundlage.

Eignet sich Astro für Unternehmenswebsites?

Ja, Astro eignet sich sehr gut für Unternehmenswebsites, besonders wenn Performance und SEO hohe Priorität haben. Die Einschränkung liegt bei der Content-Pflege: Astro bringt keinen visuellen Editor mit. Wer möchte, dass ein Marketing-Team eigenständig Seiten erstellen kann, braucht ein CMS als Ergänzung (zum Beispiel Sanity) oder sollte Webflow als Alternative prüfen. Bei designtakt wählen wir Astro dann, wenn die technischen Anforderungen den visuellen Editor-Komfort überwiegen.