헤드리스 Statamic & Astro

Statamic은 현대적인 플랫 파일 CMS입니다. 이를 통해 개발자는 동적 웹사이트와 애플리케이션을 쉽게 만들 수 있으며 콘텐츠 편집자에게는 콘텐츠 관리를 위한 직관적이고 사용자 친화적인 인터페이스를 제공합니다.

Astro와 통합

Statamic에는 데이터를 Astro에 연결하기 위한 REST API 및 GraphQL API가 내장되어 있습니다.

전제조건

시작하려면 다음이 필요합니다.

REST API 및 GraphQL API는 Statamic의 프로 버전에서만 사용할 수 있습니다. 로컬 장치에서 Pro 버전을 무료로 사용해 볼 수 있습니다.
Astro 프로젝트 - Astro 프로젝트가 여전히 필요한 경우 설치 가이드를 통해 빠르게 시작하고 실행할 수 있습니다.
Statamic 사이트 - Statamic 웹사이트가 필요한 경우 이 가이드가 시작하는 데 도움이 될 것입니다..env 파일에 STATAMIC_API_ENABLED=true 또는 STATAMIC_GRAPHQL_ENABLED=true를 추가하여 REST API 또는 GraphQL API를 활성화하고 API 구성 파일에서 필수 리소스를 활성화해야 합니다.

:::caution모든 예시는 여러분의 웹사이트가 posts라는 컬렉션을 가지고 있다고 가정합니다. 이는 post라는 청사진으로 구성되어 있으며, 제목 필드 (text 타입) 및 콘텐츠 필드 (Markdown 타입)이 있습니다.:::

데이터 가져오기

:::caution로컬 컴퓨터에서 Statamic 및 Astro를 사용하는 경우 API를 가져올 때 localhost 대신 127.0.0.1을 사용해야 합니다.

Astro 서버 localhost에서 요청할 때 브라우저에서처럼 올바르게 확인되지 않으며 두 API 중 하나에 대한 가져오기가 실패합니다.:::

REST API

사이트의 REST API URL에서 Statamic 데이터를 가져옵니다. 기본적으로 https://[YOUR-SITE]/api/입니다. 그런 다음 Astro의 set:html={} 지시어를 사용하여 데이터 속성을 렌더링할 수 있습니다.

예를 들어 선택한 컬렉션의 제목 및 해당 콘텐츠 목록을 표시하려면 다음을 수행하세요.

---
const res = await fetch("https://[YOUR-SITE]/api/collections/posts/entries?sort=-date")
const posts = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
  posts.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}

GraphQL

사이트의 GraphQL API URL을 사용하여 Statamic 데이터를 가져옵니다. 기본적으로 https://[YOUR-SITE]/graphql/입니다. 그런 다음 Astro의 set:html={} 지시어를 사용하여 데이터 속성을 렌더링할 수 있습니다.

예를 들어 선택한 컬렉션의 제목 및 해당 콘텐츠 목록을 표시하려면 다음을 수행하세요.

---
const graphqlQuery = {
  query: `
    query Entries($page: Int, $locale: String) {
      entries(
        collection: "posts"
        sort: "date asc"
        limit: 20
        page: $page
        filter: { locale: $locale }
      ) {
        current_page
        has_more_pages
        data {
          title
          ... on Entry_Posts_Post {
              content
            }
          }
       }
    }
  `,
  variables: {
    page: page,
    locale: locale,
  },
};

const res = await fetch("https://[YOUR-SITE]/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(graphqlQuery),
})

const { data } = await res.json();
const entries = data?.entries;
---
<h1>Astro + Statamic 🚀</h1>
{
  entries.data.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}