Skip to content
Deutsch
Zurück zum Verzeichnis

astro.build

200 OK

Wie Astro Inhalte in HTML umwandelt und gezielt Interaktivität hinzufügt

Developer ToolsTailwind CSS

Erkannte Technologie

Die Erkennung meldet sichtbare öffentliche Signaturen und kann keine privaten Dienste auflisten.

Tailwind CSS

Die Erkennung meldet sichtbare öffentliche Signaturen und kann keine privaten Dienste auflisten.

Die Erkennung meldet sichtbare öffentliche Signaturen und kann keine privaten Dienste auflisten.

HTML zuerst, Interaktion als Ausnahme

Astro ist ein Server-First-Framework für inhaltsorientierte Websites. Es rendert Seiteninhalte als HTML und sendet standardmäßig kein clientseitiges JavaScript; Entwickler fügen Browsercode ausdrücklich den Komponenten hinzu, die Interaktion benötigen.

Eine interaktive Komponente innerhalb einer ansonsten statischen Seite wird als Island bezeichnet. Ein Navigationselement, eine Suchoberfläche oder ein anderes Widget kann unabhängig hydriert werden, während benachbarte Überschriften, Absätze und Links gewöhnliches HTML bleiben.

Seitenbereich Anfängliche Bereitstellung Verhalten im Browser
Statischer Astro-Inhalt Serverseitig gerendertes HTML Standardmäßig keine Komponenten-Runtime
Hydriertes Island HTML plus ausgewählter Komponentencode Wird unabhängig aktiviert
Mehrere Islands HTML plus für jedes Island ausgewählter Code Jedes Island kann seine eigene Ladepriorität verwenden

Der Zeitpunkt der Hydration wird ausdrücklich festgelegt. client:load priorisiert eine sofort benötigte Steuerung, client:idle verschiebt die Arbeit, bis der Browser im Leerlauf ist, und client:visible wartet, bis sich eine Komponente dem Viewport nähert.

Integrationen und strukturierte Inhalte

Astro kann React, Preact, Svelte, Vue, Solid, HTMX, Web Components und andere UI-Ansätze für interaktive Bereiche verwenden. Dies ermöglicht die gezielte Wiederverwendung vertrauter Komponentensysteme, ohne das gesamte Dokument in eine einzige clientseitig gerenderte Anwendung zu verwandeln.

Zu den nützlichen Bereichen des Ökosystems, die das gepflegte Repository nennt, gehören:

  • UI-Integrationen für React, Preact, Solid, Svelte und Vue.
  • Unterstützung der Node-Runtime und Deployment-Adapter.
  • Publishing-Werkzeuge wie Integrationen für MDX, RSS und Sitemaps.
  • Skriptbezogene Integration durch Partytown.

Content Collections organisieren und validieren Markdown und verwandte Einträge mit Typsicherheit durch TypeScript. In der Praxis kann ein Team eine einheitliche Struktur für Artikel oder Dokumentationen definieren, ungültige Inhaltsfelder erkennen und eine zusammenhängende Collection abfragen, statt jede Datei als unabhängig zu behandeln.

Nachweise im Vergleich zu Implementierungsergebnissen

Astros öffentliche Dokumentation und das gepflegte Repository stützen Aussagen über HTML-First-Rendering, optionale Hydration, unterstützte UI-Ansätze und Content Collections. Sie beschreiben Funktionen und Standardwerte des Frameworks, nicht die Qualität jeder mit Astro erstellten Website.

Ein fertiges Projekt kann dennoch große Islands, mehrere Framework-Runtimes, umfangreiche Bilder, Schriftarten oder Skripte von Drittanbietern enthalten. Diese Entscheidungen können Leistung und Wartung beeinflussen. Besucher sollten daher zwischen Astros dokumentiertem Modell und Ergebnissen unterscheiden, die eine Untersuchung der jeweiligen Implementierung erfordern. Dieselbe Unterscheidung gilt für Barrierefreiheit und Zuverlässigkeit: Das Framework stellt architektonische Werkzeuge bereit, während das fertige Erlebnis davon abhängt, wie ein Team sie einsetzt.

Continue exploring

More published records in Developer Tools.

View all alternatives

Gatsby verbindet React-Websites mit strukturierten Inhalten und flexiblem Rendering

Developer ToolsGoogle Analytics

Next.js erweitert React um Routing, Rendering und Serverfunktionen

Developer ToolsGoogle AnalyticsNext.js

nuxt.com

200 OK

Vue-Websites und -Anwendungen mit Routing, Serverlogik und flexiblem Rendering erstellen

Developer ToolsNuxtVercel