Abrufen von Daten
.astro
-Dateien können während des Erstellungsvorgangs Remote-Daten abrufen, um die Generierung deiner Seiten zu unterstützen.
fetch()
in Astro
Abschnitt betitelt fetch() in AstroJede Astro-Komponente hat Zugriff auf die globale fetch()
-Funktion in ihrem Komponentenskript, um HTTP-Requests an APIs zu senden. Dieser fetch-Aufruf wird zur Erstellungszeit ausgeführt und die Daten sind in der Komponentenvorlage für eine dynamische HTML-Generierung verfügbar.
💡 Nutze die Vorteile von Top-Level Await in deinem Astro-Komponentenskript.
💡 Übergebe die abgerufenen Daten als Eigenschaften an Astro- als auch an Framework-Komponenten.
Beachte, dass alle Daten in Astro-Komponenten zum Render-Zeitpunkt der Komponente abgerufen werden.
Deine veröffentlichte Astro-Website ruft Daten einmalig während des Erstellungsvorgangs ab. Während der Entwicklung wirst du aber bei jeder Komponentenaktualisierung einen Datenabruf sehen. Wenn du einen mehrfachen clientseitigen Datenabruf benötigst, nutze eine Framework-Komponente oder ein clientseitiges Skript in einer Astro-Komponente.
fetch()
in Framework-Komponenten
Abschnitt betitelt fetch() in Framework-KomponentenDie fetch()
-Funktion ist auch global in jeder Framework-Komponente verfügbar:
GraphQL-Abfragen
Abschnitt betitelt GraphQL-AbfragenAstro kann auch fetch()
nutzen, um GraphQL-Server mit einer beliebigen gültigen GraphQL-Anfrage anzufragen.
Abfragen von einem Headless-CMS
Abschnitt betitelt Abfragen von einem Headless-CMSLade Remote-Inhalte von deinem bevorzugten CMS, z.B. Storyblok oder WordPress!
Astro-Komponenten könnten Daten von deinem CMS abrufen und in deinen Seiteninhalt rendern. Mit dynamischen Routen können Komponenten sogar Seiten auf der Basis deiner CMS-Inhalte generieren.
Nachfolgend zeigen wir dir einige Beispiele, wie die Datenabfrage in Astro aussieht. Links zu den vollständigen Tutorials findest du jeweils darunter.
Beispiel: Storyblok-API
Abschnitt betitelt Beispiel: Storyblok-APISieh dir das vollständige Tutorial Hinzufügen eines Headless-CMS zu Astro in 5 Minuten an, um Storyblok zu Astro hinzuzufügen!
Beispiel: WordPress + GraphQL
Abschnitt betitelt Beispiel: WordPress + GraphQLSieh dir das vollständige Tutorial Erstellen einer Astro-Website mit WordPress als Headless-CMS an, um WordPress zu deinem Astro-Projekt hinzuzufügen!
Learn