Hydrogen을 다시 설계하는 개방형 상점프런트
Shopify와 함께 Hydrogen을 오픈 소스로 다시 만들며, 런타임과 프레임워크 제약을 줄이는 방향으로 바꿉니다.
교안에 영향
기존 Hydrogen 안내 중 프레임워크와 런타임에 묶인 설명은 맞지 않게 됩니다.
요약
- Hydrogen을 처음부터 다시 설계해 더 개방적인 웹을 지향하는 오픈 소스 프로젝트로 전환했습니다. - core 계층으로 Shopify API용 중복 코드를 한곳에 모아 유지보수와 업그레이드를 쉽게 합니다. - client 계층에서 cart 상태 관리를 맡겨 React 기준의 상점 상태 처리를 단순화합니다. - server 계층과 문서, templates, skills로 Next.js, Nuxt, SvelteKit 같은 프레임워크 활용 지침을 제공합니다. - vercel.shop에서 얻은 내용을 Hydrogen에 반영하고, 안정화 후 vercel.shop도 이를 채택합니다.
바뀐 것
새 기능
- Shopify와 함께 Hydrogen을 다시 만들고, open source이며 runtime agnostic한 새 버전을 준비합니다.
- Svelte, Nuxt, Next.js 또는 custom framework로 빌드할 수 있게 지원 범위를 넓힙니다.
- three layers인 core, client, server 구조를 도입합니다.
- core에서 Shopify API용 JavaScript를 한곳에 모아 공유합니다.
- client layer가 cart를 처리하고 state management를 하나의 import로 통합합니다.
- server 계층에서 full-stack storefront 구성을 지원합니다.
- documentation, templates, skills를 통해 framework별 활용 guidance를 제공합니다.
개선
- formatMoney 같은 중복 변환 로직을 Intl.NumberFormat 중심으로 정리해 glue code를 줄입니다.
- API 변경 시 core를 한 번만 고치면 되도록 업그레이드 흐름을 단순화합니다.
- React에서 Hydrogen preview branch로 client layer를 사용할 수 있게 합니다.
기타
- vercel.shop에서 쌓은 내용을 Hydrogen의 client와 server 계층에 반영합니다.
- Hydrogen이 안정화되면 vercel.shop가 이를 채택해 reference 역할을 하게 됩니다.