Los archivos .astro pueden obtener datos remotos para ayudarte a generar tus páginas.

fetch() en Astro

Todos los componentes de Astro tienen acceso a la función global fetch() en su script de componente para hacer peticiones HTTP a APIs usando la URL completa (p.ej. https://example.com/api). Adicionalmente, puedes construir una URL a las páginas y endpoints de tu proyecto que se renderizan bajo demanda en el servidor utilizando new URL("/api", Astro.url).

Esta llamada a fetch será ejecutada en el momento de la compilación, y los datos estarán disponibles para la plantilla del componente para generar HTML dinámico. Si el modo SSR está habilitado, cualquier llamada a fetch será ejecutada en tiempo de ejecución.

💡 Aprovecha el top-level await dentro del script del componente de Astro.

💡 Puedes pasar los datos obtenidos a los componentes de Astro u otros UI frameworks como props.

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]---<!-- Los datos obtenidos en la compilación pueden ser usados en el HTML --><h1>Usuario</h1><h2>{randomUser.name.first} {randomUser.name.last}</h2><!-- Los datos obtenidos en la compilación pueden ser pasados como props a otros componentes --><Contact client:load email={randomUser.email} /><Location city={randomUser.location.city} />

:::note Recuerda, todos los datos en los componentes de Astro se obtienen cuando se renderiza el componente.

Cuando tu proyecto de Astro es desplegado obtendrá los datos una vez, en el momento de la compilación. En desarrollo, verás el fetching de datos al actualizar los componentes. Si necesitas hacer fetching datos varias veces del lado del cliente, usa un componente de framework o un script del lado del cliente en el componente de Astro. :::

fetch() en componentes de framework

La función fetch() también está disponible globalmente para cualquier componente de framework:

tsx
import type { FunctionalComponent } from 'preact';const data = await fetch('https://example.com/movies.json').then((response) =>  response.json());// Los componentes que se procesan en la compilación se registran en la CLI.// Cuando se renderizan con una directiva client:*, se registran en la consola del navegador.console.log(data);const Movies: FunctionalComponent = () => {// Envía el resultado a la página.  return <div>{JSON.stringify(data)}</div>;};export default Movies;

Consultas en GraphQL

Astro también puede usar fetch() para consultar a un servidor GraphQL con cualquier query de GraphQL válida.

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>Obteniendo información sobre Star Wars: A New Hope</h1><h2>Título: {film.title}</h2><p>Año: {film.releaseDate}</p>

Fetching de datos desde un Headless CMS

Los componentes de Astro pueden obtener datos desde tu CMS favorito y luego renderizarlos como contenido en tu página. Usando rutas dinámicas, los componentes pueden generar páginas basadas en el contenido obtenido del CMS.

Ve nuestras guías de CMS para obtener más detalles sobre cómo integrar Astro con un headless CMS incluyendo Stroyblok, Contentful y WordPress.

Recursos de la comunidad

Cursos Astro