데이터 가져오기(Data Fetching)
데이터 가져오기(Data Fetching)
Astro 컴포넌트는 페이지를 생성하기 위해 원격 데이터를 가져올 수 있어요. 빌드 시점에 데이터를 패치하고, SSR 모드에서는 런타임에 실행하는 방식으로 동작해요. Astro 컴포넌트에서 fetch()를 쓰는 방법과 프레임워크 컴포넌트·GraphQL·헤드리스 CMS 연동을 정리할게요.
Astro에서의 fetch()
모든 Astro 컴포넌트는 컴포넌트 스크립트에서 전역 fetch() 함수에 접근해서, 전체 URL(예: https://example.com/api)로 API에 HTTP 요청을 할 수 있어요. 온디맨드로 렌더링되는 프로젝트의 페이지·엔드포인트에 대한 URL은 new URL("/api", Astro.url)로 만들 수 있어요.
이 fetch 호출은 빌드 시점에 실행되고, 데이터는 동적 HTML을 생성하기 위해 컴포넌트 템플릿에서 사용할 수 있어요. SSR 모드가 활성화되면 fetch 호출은 런타임에 실행돼요.
참고: Astro 컴포넌트의 모든 데이터는 컴포넌트가 렌더링될 때 가져와져요. 배포된 Astro 사이트는 빌드 때 한 번 데이터를 가져오고, 개발 중에는 컴포넌트가 리프레시될 때 데이터 패치가 보여요. 클라이언트에서 여러 번 데이터를 다시 가져와야 한다면 프레임워크 컴포넌트나 Astro 컴포넌트 안의 클라이언트 스크립트를 쓰세요.
Astro 컴포넌트 스크립트에서 최상위 await 를 활용하는 걸 추천해요. 가져온 데이터는 Astro 컴포넌트와 프레임워크 컴포넌트 모두에 props로 전달할 수 있어요.
---
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];
---
<h1>User</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />
프레임워크 컴포넌트에서의 fetch()
fetch() 함수는 프레임워크 컴포넌트에서도 전역으로 사용할 수 있어요. 빌드 시점에 렌더링되는 컴포넌트는 CLI에도 로그를 남기고, client:* 디렉티브로 렌더링되면 브라우저 콘솔에도 로그를 남겨요.
GraphQL 쿼리
Astro는 fetch()로 유효한 GraphQL 쿼리라면 어떤 GraphQL 서버에도 질의할 수 있어요. method: "POST", Content-Type: application/json 헤더, body에 query와 variables를 담는 방식으로 요청할 수 있어요.
헤드리스 CMS에서 가져오기
Astro 컴포넌트는 좋아하는 CMS에서 데이터를 가져와 페이지 콘텐츠로 렌더링할 수 있어요. 동적 라우트를 쓰면 CMS 콘텐츠를 기반으로 페이지를 생성할 수도 있죠. Storyblok, Contentful, WordPress 등과의 통합 가이드가 제공돼요.