Warum Astro?

Astro ist das Web-Framework für die Erstellung von inhaltsgesteuerten Websites wie Blogs, Marketing und E-Commerce. Astro ist vor allem dafür bekannt, dass es eine neue Frontend-Architektur entwickelt hat, die den JavaScript-Overhead und die Komplexität im Vergleich zu anderen Frameworks reduziert. Wenn du eine Website brauchst, die schnell lädt und ein gutes SEO hat, dann ist Astro genau das Richtige für dich.

Features

Astro ist ein All-in-One-Webframework. Es enthält alles, was du zum Erstellen einer Website brauchst. Außerdem gibt es Hunderte von verschiedenen Integrationen und API-Hooks, mit denen du ein Projekt genau an deinen Anwendungsfall und deine Bedürfnisse anpassen kannst.

Einige Highlights sind:

Inseln: Eine komponentenbasierte Web-Architektur, die für inhaltsgesteuerte Websites optimiert ist.
UI-agnostisch: Unterstützt React, Preact, Svelte, Vue, Solid, Lit, HTMX, Webkomponenten und mehr.
Server-first: Verschiebt das teure Rendering von den Geräten deiner Besucher.
Null JS, standardmäßig: Weniger clientseitiges JavaScript verlangsamt deine Seite.
Inhaltssammlungen: Organisiere, validiere und biete TypeScript-Typsicherheit für deine Markdown-Inhalte.
Anpassbar: Tailwind, MDX und Hunderte von Integrationen zur Auswahl.

Gestaltungsprinzipien

Im Folgenden findest du fünf zentrale Designprinzipien, die dir erklären, warum wir Astro entwickelt haben, welche Probleme es lösen soll und warum Astro die beste Wahl für dein Projekt oder Team sein könnte.

Astro ist…

Inhaltsorientiert: Astro wurde entwickelt, um deine Inhalte zu präsentieren.
Server-first: Websites laufen schneller, wenn sie HTML auf dem Server rendern.
Standardmäßig schnell: Es sollte unmöglich sein, mit Astro eine langsame Website zu erstellen.
Einfach zu benutzen: Du musst kein Experte sein, um mit Astro etwas zu erstellen.
Entwicklerorientiert: Du solltest die Ressourcen haben, die du brauchst, um erfolgreich zu sein.

Inhaltsorientiert

Astro wurde für die Erstellung von inhaltsreichen Websites entwickelt. Dazu gehören Marketing-Websites, Verlagsseiten, Dokumentations-Websites, Blogs, Portfolios, Landing Pages, Community-Sites und E-Commerce-Sites. Wenn du Inhalte zu zeigen hast, müssen sie den Leser schnell erreichen.

Im Gegensatz dazu wurden die meisten modernen Web-Frameworks für die Erstellung von Webanwendungen entwickelt. Diese Frameworks eignen sich hervorragend für die Erstellung komplexer, anwendungsähnlicher Erlebnisse im Browser: eingeloggte Admin-Dashboards, Posteingänge, soziale Netzwerke, ToDo-Listen und sogar nativ-ähnliche Anwendungen wie Figma und Ping. Diese Komplexität kann jedoch dazu führen, dass sie bei der Bereitstellung deiner Inhalte keine gute Leistung erbringen.

Astros Fokus auf Inhalte hat Astro seit seinen Anfängen als statischer Website-Builder in die Lage versetzt, sanft zu leistungsstarken, dynamischen Webanwendungen zu skalieren, die dennoch deine Inhalte und dein Publikum respektieren. Der einzigartige Fokus von Astro auf Inhalte ermöglicht es Astro, Kompromisse einzugehen und unübertroffene Leistungsmerkmale zu liefern, deren Implementierung für anwendungsorientierte Web-Frameworks keinen Sinn machen würde.

Server-first

Astro setzt so weit wie möglich auf serverseitiges Rendering statt auf clientseitiges Rendering im Browser. Das ist derselbe Ansatz, den traditionelle serverseitige Frameworks -- PHP, WordPress, Laravel, Ruby on Rails usw. -- schon seit Jahrzehnten verwenden. Aber du brauchst keine zweite serverseitige Sprache zu lernen, um ihn zu erschließen. Mit Astro besteht alles nur noch aus HTML, CSS und JavaScript (oder TypeScript, wenn du willst).

Dieser Ansatz steht im Gegensatz zu anderen modernen JavaScript-Web-Frameworks wie Next.js, SvelteKit, Nuxt, Remix und weiteren. Diese Frameworks erfordern das clientseitige Rendering der gesamten Website und beinhalten das serverseitige Rendering hauptsächlich, um Leistungsprobleme zu lösen. Dieser Ansatz wird als Single Page App (SPA) bezeichnet, im Gegensatz zum Multi Page App (MPA)-Ansatz von Astro.

Das SPA-Modell hat seine Vorteile. Diese gehen jedoch auf Kosten von zusätzlicher Komplexität und Leistungseinbußen. Diese Kompromisse beeinträchtigen die Seitenleistung -- kritische Kennzahlen wie die Time to Interactive (TTI) --, was für inhaltsorientierte Websites, bei denen die Leistung beim ersten Laden entscheidend ist, wenig sinnvoll ist.

Der Server-First-Ansatz von Astro ermöglicht es dir, nur bei Bedarf auf das clientseitige Rendering umzusteigen. Du kannst UI-Framework-Komponenten hinzufügen, die auf dem Client ausgeführt werden. Du kannst den Astro-View-Transitions-Router nutzen, um ausgewählte Seitenübergänge und Animationen genauer zu steuern. Das Server-First-Rendering von Astro, das entweder vorgerendert oder bei Bedarf ausgeführt wird, bietet leistungsfähige Standardeinstellungen, die du verbessern und erweitern kannst.

Standardmäßig schnell

Eine gute Leistung ist immer wichtig, aber sie ist besonders wichtig für inhaltsfokussierte Websites. Es ist erwiesen, dass eine schlechte Leistung zu einem Verlust an Engagement, Konversionen und Einnahmen führt. Ein Beispiel:

Jede 100ms schneller → 1% mehr Konversionen (Mobify, Verdienst +$380,000/Jahr)
50% schneller → 12% mehr Umsatz (AutoAnything)
20% schneller → 10% mehr Konversionen (Furniture Village)
40% schneller → 15% mehr Registrierungen (Pinterest)
850ms schneller → 7% mehr Konversionen (COOK)
Jede 1 Sekunde langsamer → 10% weniger Nutzer (BBC)

Bei vielen Web-Frameworks ist es leicht möglich, eine Website zu erstellen, die während der Entwicklung großartig aussieht, aber nach der Veröffentlichung schmerzhaft langsam lädt. JavaScript ist oft der Schuldige, da Smartphones und Geräte mit geringerer Leistung selten die Geschwindigkeit des Laptops eines Entwicklers erreichen.

Die Magie von Astro liegt in der Kombination der beiden oben genannten Werte - ein Fokus auf Inhalte mit einer Server-first MPA-Architektur - um Kompromisse zu machen und Funktionen zu liefern, die andere Frameworks nicht bieten können. Das Ergebnis ist eine erstaunliche Web-Performance für jede Website, Out-of-the-Box. Unser Ziel: Es sollte nahezu unmöglich sein, mit Astro eine langsame Website zu erstellen.

Eine Astro-Website kann mit 90% weniger JavaScript 40% schneller laden als die gleiche Website, die mit dem beliebten React-Webframework erstellt wurde. Aber nimm uns nicht beim Wort: Sieh dir an, wie Astros Leistung Ryan Carniato (Schöpfer von Solid.js und Marko) sprachlos macht.

Einfach zu benutzen

Das Ziel von Astro ist es, für jeden Webentwickler zugänglich zu sein. Astro wurde so konzipiert, dass es sich vertraut und zugänglich anfühlt, unabhängig von den Fähigkeiten oder der bisherigen Erfahrung mit Webentwicklung.

Die UI-Sprache .astro ist ein Übersatz von HTML: Jedes gültige HTML ist eine gültige Astro-Vorlagen-Syntax! Wenn du also HTML schreiben kannst, kannst du auch Astro-Komponenten schreiben! Astro vereint aber auch einige unserer Lieblingsfunktionen aus anderen Komponentensprachen wie JSX-Ausdrücke (React) und CSS-Scoping (Svelte und Vue). Diese Nähe zu HTML macht es auch einfacher, progressive Verbesserungen und gängige Zugänglichkeitsmuster ohne Overhead zu nutzen.

Dann haben wir dafür gesorgt, dass du auch deine bevorzugten UI-Komponenten-Sprachen verwenden kannst, die du bereits kennst, und sogar Komponenten wiederverwenden kannst, die du vielleicht schon hast. React, Preact, Svelte, Vue, Solid, Lit und andere, einschließlich Webkomponenten, werden alle für die Erstellung von UI-Komponenten in einem Astro-Projekt unterstützt.

Astro wurde entwickelt, um weniger komplex zu sein als andere UI-Frameworks und Sprachen. Ein wichtiger Grund dafür ist, dass Astro für das Rendering auf dem Server und nicht im Browser entwickelt wurde. Das bedeutet, dass du dich nicht um Hooks (React), Stale Closures (ebenfalls React), Refs (Vue), Observables (Svelte), Atoms, Selectors, Reactions oder Derivations kümmern musst. Auf dem Server gibt es keine Reaktivität, sodass all diese Komplexität verschwindet.

Einer unserer Lieblingssprüche lautet: opt in to complexity (Komplexität nur, wenn du sie brauchst). Wir haben Astro so konzipiert, dass so viel „erforderliche Komplexität“ wie möglich aus dem Entwicklererlebnis entfernt wird, besonders wenn du zum ersten Mal einsteigst. Du kannst eine „Hello World“-Beispielwebsite in Astro mit nur HTML und CSS erstellen. Wenn du dann etwas Mächtigeres bauen willst, kannst du nach und nach neue Funktionen und APIs nutzen.

Entwicklerorientiert

Wir glauben fest daran, dass Astro nur dann ein erfolgreiches Projekt ist, wenn die Menschen es gerne benutzen. Astro hat alles, was du brauchst, um dich bei deiner Arbeit mit Astro zu unterstützen.

Astro investiert in Entwickler-Tools, wie z. B. eine großartige CLI-Erfahrung vom ersten Moment an, eine offizielle VS Code-Erweiterung für Syntax-Highlighting, TypeScript und Intellisense sowie eine Dokumentation, die von Hunderten von Community-Mitarbeitern aktiv gepflegt wird und in 14 Sprachen verfügbar ist.

Unsere einladende, respektvolle und integrative Community auf Discord ist bereit, dich zu unterstützen, zu motivieren und zu ermutigen. Eröffne einen #support-Thread, um Hilfe für dein Projekt zu bekommen. Besuche unseren speziellen #showcase-Kanal, in dem du deine Astro-Seiten, Blogbeiträge, Videos und sogar laufende Projekte vorstellen kannst, um sicheres Feedback und konstruktive Kritik zu erhalten. Nimm an regelmäßigen Live-Events wie unserem wöchentlichen Community-Call, „Talking and Doc’ing“, und „API/bug bashes“ teil.

Als Open-Source-Projekt begrüßen wir Beiträge aller Art und Größe von Community-Mitgliedern aller Erfahrungsstufen. Du bist eingeladen, dich an Diskussionen über die Roadmap zu beteiligen, um die Zukunft von Astro zu gestalten, und wir hoffen, dass du Korrekturen und Funktionen für die Kern-Codebasis, den Compiler, die Dokumentation, die Sprachwerkzeuge, die Websites und andere Projekte beisteuern wirst.