Hygraph (GraphCMS) 개발

Hygraph가 다른 헤드리스 CMS인 이유

Hygraph — 이전의 GraphCMS — 는 GraphQL을 기반으로 처음부터 끝까지 구축된 유일한 헤드리스 CMS입니다. 이것은 마케팅 속임수가 아닙니다. 콘텐츠 API가 기본적으로 타입을 가지고 있으며, 외과적 정밀함으로 쿼리할 수 있고, 여러 소스의 콘텐츠를 단일 통합 API로 통합할 수 있다는 의미입니다.

GraphCMS 시절부터 Hygraph에서 프로덕션 애플리케이션을 구축했습니다. 우리는 어떤 부분이 뛰어나고, 어떤 부분이 거친지, 그리고 유지보수 악몽으로 변하지 않고 확장할 수 있는 콘텐츠 모델을 어떻게 설계하는지 알고 있습니다.

Hygraph를 선택할 가치가 있는 이유

네이티브 GraphQL, 붙인 것이 아님

대부분의 헤드리스 CMS 플랫폼은 REST API를 먼저 제공하고 GraphQL을 사후에 추가합니다. Hygraph는 그 반대입니다. 모든 콘텐츠 타입, 모든 관계, 모든 자산이 자동으로 완전히 타입이 지정된 GraphQL 스키마를 얻습니다. 필요한 필드만 정확히 쿼리할 수 있습니다 — 오버페칭 없음, 언더페칭 없음, 여러 API 호출을 연결할 필요 없음.

이것은 성능에 중요합니다. 단일 Hygraph 쿼리는 중첩된 콘텐츠, 지역화된 변형 및 관련 항목을 한 번의 왕복으로 해결할 수 있습니다. REST 기반 CMS로 이를 시도하면 페이지가 로드되기 전에 속도 제한을 초과할 것입니다.

콘텐츠 페더레이션

Hygraph의 Remote Sources 기능을 사용하면 외부 REST 및 GraphQL API에서 데이터를 가져오고 네이티브 콘텐츠처럼 처리할 수 있습니다. Shopify의 상품 데이터, 백엔드의 사용자 프로필, Stripe의 가격 책정 — 모두 하나의 통합 GraphQL 엔드포인트를 통해 접근할 수 있습니다.

콘텐츠 편집자가 Hygraph에서 작업하는 동안 프론트엔드가 데이터가 어디에 있는지 알거나 신경 쓰지 않고 여러 데이터 소스에서 가져오는 애플리케이션을 구축하기 위해 이를 많이 사용합니다.

세분화된 권한 및 워크플로우

Hygraph는 단계 기반 콘텐츠 워크플로우(초안 → 검토 → 게시됨) 및 실제로 엔터프라이즈 팀을 위해 작동하는 역할 기반 접근 제어를 제공합니다. 콘텐츠 편집자는 필요한 것만 봅니다. 개발자는 스키마 변경을 잠글 수 있습니다. 검토자는 프로덕션에 접근하지 않고 승인합니다.

Hygraph 개발에 대한 우리의 접근 방식

깨지지 않는 콘텐츠 모델링

모든 CMS 프로젝트에서 가장 중요한 결정은 단일 라인의 프론트엔드 코드가 작성되기 전에 발생합니다: 콘텐츠 모델입니다. 이것을 잘못 하면 6개월 후에 리팩토링을 하게 됩니다.

우리는 다음 원칙에 따라 Hygraph 스키마를 설계합니다:

• 컴포넌트 기반 모델 — 콘텐츠 타입은 프론트엔드 컴포넌트에 직접 매핑됩니다. 편집자는 모놀리식 페이지 타입이 아닌 모듈식 블록에서 페이지를 조립합니다.
• 관계 아키텍처 — 우리는 일대다, 다대다 및 다형 관계를 미리 계획합니다. Hygraph의 유니온 타입은 일반적인 "캐치올" 필드에 의존하지 않고 유연한 콘텐츠 구조를 생성할 수 있게 합니다.
• 처음부터 지역화 — Hygraph는 필드 수준 지역화를 지원합니다. 우리는 사후 조치가 아닌 초기 스키마 설계 중에 이를 구성합니다.
• 자유 텍스트 대신 열거형 필드 — 가능한 경우, 우리는 입력을 열거형으로 제한합니다. 이는 데이터 품질 문제를 방지하고 필터링을 예측 가능하게 만듭니다.

프론트엔드 통합

우리는 주로 Next.js와 Astro로 Hygraph 기반 프론트엔드를 구축합니다. 일반적으로 다음과 같습니다:

Next.js + Hygraph: 우리는 Next.js App Router를 서버 컴포넌트와 함께 사용하여 빌드 시간 또는 요청 시간에 Hygraph를 쿼리합니다. GraphQL 쿼리는 서버 측에서 실행되므로 API 토큰이 브라우저에 도달하지 않습니다. 우리는 Hygraph 웹훅으로 ISR(증분 정적 재생성)을 구현하여 콘텐츠가 변경될 때 특정 페이지를 다시 유효성을 검사합니다 — 전체 재구축 없음.

Astro + Hygraph: 상호작용이 최소인 콘텐츠 기반 사이트의 경우, Astro의 정적 우선 접근 방식과 Hygraph가 결합되어 뛰어난 성능을 제공합니다. 우리는 .astro 파일에 GraphQL 쿼리를 작성하고, 기본적으로 JavaScript를 0개 제공하며, 필요한 경우에만 대화형 아일랜드를 수화합니다.

두 경우 모두 GraphQL Code Generator를 사용하여 Hygraph의 GraphQL 스키마에서 TypeScript 타입을 생성합니다. 모든 쿼리는 타입 안전합니다. 모든 컴포넌트는 정확히 어떤 데이터 형태를 기대하는지 알고 있습니다.

웹훅 기반 워크플로우

Hygraph 웹훅은 콘텐츠 라이프사이클 이벤트 — 생성, 업데이트, 게시, 게시 취소, 삭제에 대해 트리거합니다. 우리는 이들을 다음에 연결합니다:

• Next.js의 온디맨드 ISR 은 전체 배포 없이 즉각적인 콘텐츠 업데이트를 위해
• 콘텐츠가 변경될 때 Algolia 또는 Meilisearch의 검색 인덱스 업데이트
• 편집 워크플로우를 위해 Slack 또는 이메일을 통한 알림 파이프라인
• 전 세계 분산 사이트를 위한 CDN 계층에서의 캐시 무효화

미리보기 및 초안 모드

편집자는 게시 전에 게시 취소된 콘텐츠를 봐야 합니다. 우리는 Next.js Draft Mode 또는 Astro의 서버 렌더링된 미리보기 경로로 Hygraph의 Draft 단계를 구현합니다. 콘텐츠 편집자는 Hygraph의 미리보기 링크를 클릭하고 실제 프론트엔드에서 렌더링된 변경 사항을 봅니다. 눈에 띄는 "미리보기" 배너가 있어 무엇이 라이브인지에 대한 혼동이 없습니다.

우리와 함께 작업할 때 얻는 것

발견 및 스키마 설계

우리는 콘텐츠 요구 사항을 감시하고, 콘텐츠 타입과 관계를 매핑하며, 편집 인체공학과 쿼리 성능 모두에 최적화된 Hygraph 스키마를 설계합니다. 개발이 시작되기 전에 문서화된 콘텐츠 모델을 얻습니다.

프론트엔드 구축

Next.js 또는 Astro의 프로덕션 준비 프론트엔드, Hygraph와 완전히 통합. 타입 안전 GraphQL 쿼리, Hygraph의 자산 파이프라인을 통한 최적화된 이미지 처리, 및 디자인 시스템으로 구축된 반응형 레이아웃.

편집 경험 설정

사용자 정의 사이드바 위젯, 구성된 단계 및 권한, 미리보기 환경 및 문서화된 편집 워크플로우. 콘텐츠 팀은 개발자가 생각하는 방식이 아닌 그들이 생각하는 방식으로 작동하는 CMS를 얻습니다.

성능 최적화

우리는 쿼리 배칭, 지원되는 경우 지속 쿼리, CDN 캐싱 전략 및 Hygraph의 내장 변환 및 next/image 또는 Astro의 이미지 컴포넌트를 통한 이미지 최적화를 구현합니다. Core Web Vitals는 사후 생각이 아닙니다 — 제약 조건은 우리가 설계한 것입니다.

배포 및 인프라

우리는 타입 검사를 실행하고 Hygraph 스키마에 대해 GraphQL 쿼리를 린트하고 깨지는 변경 사항이 프로덕션에 도달하지 않도록 하는 CI/CD 파이프라인과 함께 Vercel, Netlify 또는 Cloudflare Pages에 배포합니다.

Hygraph가 올바른 선택인 경우

Hygraph는 다음과 같은 경우에 가장 잘 작동합니다:

• 팀이 이미 GraphQL로 생각하거나 원하는 경우
• 여러 외부 소스에서 콘텐츠를 통합해야 하는 경우
• 다중 언어 콘텐츠가 좋은 것이 아닌 핵심 요구 사항인 경우
• 단계 기반 게시와 함께 세분화된 편집 워크플로우를 원하는 경우
• 프론트엔드가 GraphQL을 효율적으로 사용할 수 있는 최신 프레임워크로 구축된 경우

간단한 블로그나 REST 단순성이 선호되는 사이트에는 이상적이지 않습니다. 우리는 미리 당신에게 알려드리고 더 나은 맞춤이면 대안을 제안합니다.

우리 Hygraph 구축 뒤의 기술

모든 프로젝트는 다르지만, 우리의 Hygraph 스택은 일반적으로 프론트엔드의 Next.js 또는 Astro, 타입 안전을 위한 GraphQL Code Generator, 호스팅을 위한 Vercel 또는 Netlify, 프로젝트가 보장할 때 모노리포 관리를 위한 Turborepo와 같은 도구를 포함합니다. 우리는 urql 또는 graphql-request를 경량 GraphQL 클라이언트로 사용합니다 — Apollo는 대부분의 CMS 기반 프론트엔드에 과다합니다.

우리는 마케팅 사이트, 설명서 플랫폼, 멀티 브랜드 콘텐츠 허브 및 전자상거래 상점 정면에 Hygraph 프로젝트를 배포했습니다. 패턴은 입증되었습니다. 도구는 성숙합니다. 그리고 편집 경험은 클라이언트로부터 일관되게 최고의 피드백입니다.