Obtención de datos

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 realizar solicitudes HTTP a APIs utilizando la URL completa (por ejemplo, https://example.com/api). Además, puedes construir una URL para las páginas y endpoints de tu proyecto que se renderizan bajo demanda en el servidor utilizando new URL("/api", Astro.url).

Esta llamada fetch se ejecutará en tiempo de 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 fetch se ejecutará en tiempo de ejecución.

💡 Aprovecha el await de nivel superior (top-level await) dentro del script de tu componente de Astro.

💡 Pasa los datos obtenidos tanto a los componentes de Astro como a los de framework, como props.

src/components/User.astro

---
import 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];
---
<!-- Data fetched at build can be rendered in HTML -->
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- Data fetched at build can be passed to components as props -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />

Nota

Recuerda, todos los datos en los componentes de Astro se obtienen cuando se renderiza un componente.

Tu sitio de Astro desplegado obtendrá datos una vez, en tiempo de compilación. En desarrollo, verás la obtención de datos cada vez que se actualice el componente. Si necesitas volver a obtener datos varias veces en el lado del cliente, utiliza un componente de framework o un script del lado del cliente en un componente de Astro.

fetch() en componentes de framework

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

src/components/Movies.tsx

import type { FunctionalComponent } from 'preact';

const data = await fetch('https://example.com/movies.json').then((response) => response.json());

// Components that are build-time rendered also log to the CLI.
// When rendered with a `client:*` directive, they also log to the browser console.
console.log(data);

const Movies: FunctionalComponent = () => {
  // Output the result to the page
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;

Consultas GraphQL

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

src/components/Film.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>Fetching information about Star Wars: A New Hope</h1>
<h2>Title: {film.title}</h2>
<p>Year: {film.releaseDate}</p>

Obtener datos de un CMS headless

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

Consulta nuestras Guías de CMS para obtener todos los detalles sobre cómo integrar Astro con CMS headless, incluidos Storyblok, Contentful y WordPress.

Recursos de la comunidad

• Creación de una aplicación fullstack con Astro + GraphQL