.astro-Dateien können Daten aus der Ferne abrufen, um dir bei der Erstellung deiner Seiten zu helfen.

fetch() in Astro

Alle Astro-Komponenten haben Zugriff auf die globale Funktion fetch() in ihrem Komponentenskript, um HTTP-Anfragen an APIs unter Verwendung der vollständigen URL (z. B. https://example.com/api) zu stellen. Außerdem kannst du mit new URL("/api", Astro.url) eine URL zu den Seiten und Endpunkten deines Projekts konstruieren, die bei Bedarf auf dem Server gerendert werden.

Dieser Fetch-Aufruf wird zur Erstellungszeit ausgeführt, und die Daten stehen der Komponentenvorlage für die Erzeugung von dynamischem HTML zur Verfügung. Wenn der Modus SSR aktiviert ist, werden alle Fetch-Aufrufe zur Laufzeit ausgeführt.

💡 Nutze die Vorteile von Top-Level Await in deinem Astro-Komponentenskript.

💡 Übergib die abgerufenen Daten als Eigenschaften an Astro- als auch an Framework-Komponenten.

astro
---// src/components/User.astroimport Contact from '../components/Contact.jsx';import Location from '../components/Location.astro';const response = await fetch('https://randomuser.me/api/');const data = await response.json();const randomUser = data.results[0];---<!-- Daten, die zur Erstellungszeit abgerufen werden, können in HTML gerendert werden --><h1>User</h1><h2>{randomUser.name.first} {randomUser.name.last}</h2><!-- Daten, die zur Erstellungszeit abgerufen werden, können als Eigenschaften an die Komponente übergeben werden --><Contact client:load email={randomUser.email} /><Location city={randomUser.location.city} />

:::note 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

Die fetch()-Funktion ist auch global in jeder Framework-Komponente verfügbar:

tsx
import type { FunctionalComponent } from 'preact';const data = await fetch('https://example.com/movies.json').then((response) =>  response.json());// Komponenten, die zum Zeitpunkt der Erstellung gerendert werden, loggen Daten auch in der CLI.// Wenn sie mit einer client:*-Direktive gerendert werden, wird dies auch in der Browser-Konsole angezeigt.console.log(data);const Movies: FunctionalComponent = () => {// Ausgabe des Ergebnisses in die Seite  return <div>{JSON.stringify(data)}</div>;};export default Movies;

GraphQL-Abfragen

Astro kann auch fetch() nutzen, um GraphQL-Server mit einer beliebigen gültigen GraphQL-Anfrage anzufragen.

astro
---const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",  {    method: 'POST',    headers: {'Content-Type':'application/json'},    body: JSON.stringify({      query: `        query getFilm ($id:ID!) {          film(id: $id) {            title            releaseDate          }        }      `,      variables: {        id: "ZmlsbXM6MQ==",      },    }),  });const json = await response.json();const { film } = json.data;---<h1>Informationen über Star Wars: Eine neue Hoffnung abrufen</h1><h2>Titel: {film.title}</h2><p>Jahr: {film.releaseDate}</p>

Abfragen von einem Headless-CMS

Astro-Komponenten können Daten aus deinem bevorzugten CMS abrufen und sie dann als Seiteninhalt wiedergeben. Mit dynamischen Routen können die Komponenten sogar Seiten auf der Grundlage deiner CMS-Inhalte erstellen.

In unseren CMS Guides findest du alle Details zur Integration von Astro in Headless CMS wie Storyblok, Contentful und WordPress.

Community-Ressourcen

Astro-Kurse