Vercel과 Shopify의 Hydrogen 전면 재설계

Vercel과 Shopify가 Hydrogen을 오픈소스·런타임 무관 프레임워크로 전면 재설계했다. 기존 Hydrogen은 빠른 헤드리스 스토어프런트 배포를 지원했지만 플랫폼 종속성이 있었고, 새 버전은 Svelte, Nuxt, Next.js 등 어느 JavaScript 프레임워크에서도 동작한다. 3레이어 아키텍처(코어/클라이언트/서버)로 재구성하면서 각 레이어가 명확한 역할을 분담한다.

핵심 포인트

코어 레이어는 MoneyV2 타입 변환(formatMoney) 등 개발자가 반복 작성하던 유틸리티를 중앙화해 API 변경 시 픽스가 모든 사용자에게 자동 전파된다.
클라이언트 레이어는 createCartComponents()로 폼 기반 장바구니 상태 관리(addLine/updateLine/removeLine)를 단일 import로 추상화했다.
서버 레이어는 독자 캐싱 솔루션 대신 Next.js, Nuxt, SvelteKit의 네이티브 캐싱·리밸리데이션 메커니즘을 위임해 활용한다.
i18n 같은 공통 기능은 스킬 패턴으로 제공 — 로케일 라우팅, 메시지 카탈로그, hreflang 메타까지 단계별 구성 가이드가 포함된다.
Next.js 16 cacheComponents와의 호환을 위해 동적 세그먼트 위치, setRequestLocale 회피 등 구체적인 구성 요건이 명시된다.

상세 정리

배경: 기존 Hydrogen은 Shopify 헤드리스 스토어프런트를 빠르게 구축할 수 있었지만 특정 런타임에 종속돼 프레임워크·플랫폼 변경이 어려웠다.
재설계 목표: JavaScript가 실행되는 곳이라면 어디서든을 원칙으로 삼아 Svelte, Nuxt, Next.js, 커스텀 프레임워크 모두를 지원한다.
코어 레이어: Shopify API의 MoneyV2(소수점이 텍스트로 직렬화됨)를 처리하는 formatMoney 등 반복 변환 로직을 하나로 모았다. 중앙화된 유틸리티이므로 API 스펙 변경 시 한 곳만 고치면 전체에 반영된다.
클라이언트 레이어: createCartComponents()로 장바구니 상호작용 제공. useCartForm() 훅과 필드 register 함수로 상태 관리 재구현 없이 모범 패턴 즉시 적용 가능. 현재 React를 지원하고 추가 프레임워크가 예정돼 있다.
서버 레이어: TypeScript 안전 GraphQL 클라이언트만 제공하고 성능 전략(캐싱, 리밸리데이션)은 각 프레임워크에 일임한다.
i18n 스킬: next-intl 미들웨어와 루트 파라미터로 로케일 접두사 URL을 구성, 미들웨어에서 미접두사 URL을 활성 로케일로 리다이렉트. lib/seo.ts 모듈이 각 로케일마다 canonical URL과 hreflang 대안, 사이트맵 엔트리를 자동 생성한다.
Next.js 16 cacheComponents 대응: 동적 세그먼트를 루트 레이아웃에 두고 setRequestLocale 호출을 피해야 하며, next/link를 그대로 사용하고 prerender 샘플에 헤더·쿠키를 명시해야 빌드가 통과한다.
오픈 개발: GitHub 프리뷰 브랜치에서 공개 개발 중이며, vercel.shop이 향후 Hydrogen을 기반으로 채택해 레퍼런스 구현이 될 예정이다.