.astro 파일은 페이지 생성을 돕기 위해 원격 데이터를 가져올 수 있습니다.

Astro의 fetch()

모든 Astro 컴포넌트는 컴포넌트 스크립트에서 전역 fetch() 함수를 사용할 수 있습니다. 이를 통해 전체 URL (예: https://example.com/api)을 사용하여 API에 HTTP 요청을 보낼 수 있습니다. 또한 new URL("/api", Astro.url)을 사용하여 요청 시 서버에서 렌더링되는 프로젝트 페이지 및 엔드포인트에 대한 URL을 구성할 수 있습니다.

이 fetch 호출은 빌드 시 실행되며, 데이터는 동적 HTML 생성을 위해 컴포넌트 템플릿에서 사용할 수 있습니다. SSR 모드가 활성화된 경우 모든 fetch 호출은 런타임에 실행됩니다.

💡 Astro 컴포넌트 스크립트에서 최상위 await를 활용하세요.

💡 가져온 데이터를 Astro 및 프레임워크 컴포넌트 모두에 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];---<!-- 빌드 시 가져온 데이터는 HTML로 렌더링될 수 있습니다. --><h1>User</h1><h2>{randomUser.name.first} {randomUser.name.last}</h2><!-- 빌드 시 가져온 데이터는 컴포넌트에 props로 전달될 수 있습니다. --><Contact client:load email={randomUser.email} /><Location city={randomUser.location.city} />

:::note Astro 컴포넌트의 모든 데이터는 컴포넌트가 렌더링될 때 가져온다는 것을 기억하세요.

배포된 Astro 사이트는 빌드 시 한 번만 데이터를 가져옵니다. 개발 환경에서는 컴포넌트 새로고침 시 데이터 가져오기를 확인할 수 있습니다. 클라이언트 측에서 데이터를 여러 번 다시 가져와야 하는 경우 Astro 컴포넌트에서 프레임워크 컴포넌트 또는 클라이언트 측 스크립트를 사용하세요. :::

프레임워크 컴포넌트의 fetch()

fetch() 함수는 모든 프레임워크 컴포넌트에서도 전역적으로 사용할 수 있습니다.

tsx
import type { FunctionalComponent } from "preact";const data = await fetch("https://example.com/movies.json").then((response) => response.json());// 빌드 시 렌더링되는 컴포넌트는 CLI에도 로그를 기록합니다.// `client:*` 지시어를 사용하여 렌더링될 때 브라우저 콘솔에도 로그를 기록합니다.console.log(data);const Movies: FunctionalComponent = () => {  // 결과를 페이지에 출력합니다.  return <div>{JSON.stringify(data)}</div>;};export default Movies;

GraphQL 쿼리

Astro는 유효한 GraphQL 쿼리와 fetch()를 사용하여 GraphQL 서버를 쿼리할 수도 있습니다.

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>스타워즈: 새로운 희망에 대한 정보 가져오기</h1><h2>제목: {film.title}</h2><p>개봉일: {film.releaseDate}</p>

헤드리스 CMS에서 가져오기

Astro 컴포넌트는 즐겨 사용하는 CMS에서 데이터를 가져와 페이지 콘텐츠로 렌더링할 수 있습니다. 동적 라우트를 사용하면 컴포넌트가 CMS 콘텐츠를 기반으로 페이지를 생성할 수도 있습니다.

Storyblok, Contentful, WordPress를 포함한 헤드리스 CMS와 Astro를 통합하는 방법에 대한 자세한 내용은 CMS 가이드를 참조하세요.

커뮤니티 리소스

Astro 과정