Hydrogen은 헤드리스 스토어프런트(headless storefronts)를 쉽게 출시할 수 있게 해주었지만, 이식성(portable)은 갖추지 못했습니다. 뉴욕에서 열린 Vercel Ship 26에서, 우리는 웹에 대한 공동의 베팅으로서 Shopify와 협력하여 Hydrogen을 처음부터 다시 구축하고 있다고 발표했습니다.more open

새로운 버전은 오픈 소스(open source)이며 런타임 불가지론적(runtime agnostic)입니다. 즉, JavaScript가 실행되는 곳이라면 어디에서나 실행될 수 있음을 의미합니다. Svelte, Nuxt, Next.js를 사용하여 빌드하거나, 심지어 자신만의 커스텀 프레임워크를 가져와 사용할 수도 있습니다.

우리의 전략은 코어(core), 클라이언트(client), 서버(server)의 세 가지 레이어를 포함합니다.

코어(Core)는 우리 모두가 Shopify API를 위해 작성해 왔지만 결코 공유하지 않았던 JavaScript입니다. 이제 이것은 한 곳에 모여 있습니다.

Intl.NumberFormat을 예로 들어보겠습니다. 오픈 웹(open web)은 이미 formatMoney를 통해 이 문제의 대부분을 해결했습니다.

하지만 Shopify API는 number를 제공하지 않습니다. 대신 커스텀 타입인 MoneyV2로 응답하며, 금액은 문자열로 직렬화된 부호 있는 십진수(signed decimal number)입니다.

결과는 동일하지만, 더 이상 접착 코드(glue code)를 작성하거나 유지 관리할 필요가 없습니다. API가 변경되어도 업그레이드는 매우 간단합니다.

코어를 중앙 집중화하면 버그를 한 번만 수정하고, 개선 사항을 모두에게 배포하며, 다시 구축에 집중할 수 있습니다.

코어가 반환하는 내용을 렌더링하는 과정에서도 동일한 반복적 결정이 수반됩니다. 장바구니 상태(Cart state)가 대표적인 예입니다.

커머스 앱을 구축해 본 사람이라면 누구나 이와 유사한 코드를 작성해 보았을 것입니다. 매번 코드는 다르지만, 모두 동일한 것을 쫓고 있습니다.

Hydrogen을 통해 이제 클라이언트 레이어(client layer)가 장바구니를 처리합니다. 상태 관리(State management)는 단 하나의 임포트(import)로 해결됩니다.

이를 중앙 집중화하면 베스트 프랙티스(best practices)를 무료로 얻을 수 있으므로, 실제로 여러분이 구축해야 할 부분에 시간을 더 할애할 수 있습니다. 현재 Hydrogen preview branch의 React를 위해 사용할 수 있으며, 더 많은 프레임워크가 추가될 예정입니다.

개발자들은 성능을 희생하지 않으면서도 확장 가능한 스토어프론트 (storefront)를 구축하기 위해 풀스택 (full-stack) 접근 권한이 필요합니다. 정적 콘텐츠는 CDN에서 즉시 제공되어야 하는 동시에, 재고와 같은 동적 데이터는 실시간으로 흘러 들어와야 합니다.

오픈 소스 (open-source) 커뮤니티는 Next.js, Nuxt, SvelteKit과 같은 프레임워크를 통해 이 문제를 해결했습니다. 즉, 독점적인 런타임 (runtime)에 종속되지 않으면서도 풀스택 기능을 제공하는 것입니다.

예를 들어, 여러분의 스토어프론트가 온디맨드 재검증 (on-demand revalidation)을 통해 제품 쿼리를 캐싱한다고 가정해 봅시다. 여러분은 GraphQL 쿼리를 작성합니다. Hydrogen은 타입 안정성이 보장된 클라이언트 (type-safe client)를 제공합니다. Next.js는 캐싱을 처리하며, 여러분은 별도의 글루 코드 (glue code) 없이 풀스택 프레임워크와 헤드리스 (headless) Shopify API를 모두 사용할 수 있게 됩니다.

Shopify는 이미 Headless 판매 채널을 통해 이러한 프레임워크들을 지원하고 있지만, 지금까지 우리는 동일한 API 계약 (API contract)에 대해 각자 자신만의 바인딩 (bindings)을 작성해 왔습니다. 이 계층에서 필요한 해결책은 더 많은 코드가 아니라 가이드 (guidance)입니다. 인간과 에이전트 (agents) 모두 Shopify를 위해 무언가를 재발명하는 대신, 이러한 프레임워크들이 이미 수행하고 있는 기능을 어떻게 사용하는지 알아야 합니다.

그 가이드는 문서 (documentation), 템플릿 (templates), 그리고 기술 (skills)의 형태로 제공됩니다.

Hydrogen 이전에는 에이전틱 커머스 (agentic commerce)를 위한 자체 템플릿인 vercel.shop을 구축했습니다. 이는 Next.js와 Shopify를 사용하여 헤드리스로 전환하는 것을 더 쉽게 만들어 줍니다.

그 방식은 효과적이었으며, 이제 우리는 더 나아가려 합니다. 우리는 vercel.shop을 구축하며 배운 모든 것을 클라이언트 (client) 및 서버 (server) 계층의 Hydrogen에 통합할 것입니다. Hydrogen이 안정화되면, 이를 채택하여 Hydrogen과 Next.js로 스토어프론트를 구축하기 위한 우리의 참조 모델 (reference)로 삼을 것입니다. vercel.shopvercel.shop

Vercel의 목표는 단순합니다: 모두를 위해 더 나은 웹을 만드는 것입니다.

Hydrogen을 통해, 이는 특정 런타임, 프레임워크 또는 플랫폼에 종속되지 않으면서 최상의 개발자 경험 (developer experience)을 제공하는 것을 의미합니다.

우리는 이를 공개적으로 구축하고 있습니다. GitHub에서 함께해 주세요: 직접 시도해 보고, 포크 (fork)하고, 다음에 올 것을 함께 만들어 갑시다.

더 읽어보기

핵심 (The core)

클라이언트 (The client)

서버 (The server)

vercel.shop과의 관계

향후 계획 (Going forward)