Vercel и Shopify пересобирают фреймворк Hydrogen как open source и runtime-agnostic

Vercel и Shopify объявили на конференции Vercel Ship 26 в Нью-Йорке, что полностью пересобирают фреймворк для headless-коммерции Hydrogen, делая его open source и агностичным к рантайму — теперь он сможет работать в любой среде, где выполняется JavaScript, а не только в связке с конкретным стеком.

Что изменится в новой архитектуре

Hydrogen раньше упрощал запуск headless-витрин, но плохо переносился между стеками. Новая версия открыта и не привязана к рантайму: разработчики смогут собирать магазин на Svelte, Nuxt, Next.js или на собственном фреймворке.

• Анонс сделан на конференции Vercel Ship 26 в Нью-Йорке
• Новая версия Hydrogen — open source и runtime-agnostic
• Поддерживаются Svelte, Nuxt, Next.js и произвольные фреймворки
• Архитектура делится на три слоя: core, client и server

Как устроен слой core

Раньше каждая команда сама писала «клеевой» код для работы с Shopify API — например, для форматирования цены: API отдаёт не число, а собственный тип MoneyV2, где сумма закодирована как строка. Теперь эта логика вынесена в общий слой core на основе стандартного Intl.NumberFormat: разработчик вызывает готовую функцию formatMoney и получает отформатированную цену без написания и поддержки собственной обвязки. Когда Shopify API меняется, обновление становится тривиальным, а не ручной правкой в каждом проекте.

Что делает клиентский слой

Клиентский слой берёт на себя повторяющиеся решения по рендерингу — в первую очередь состояние корзины. Раньше каждый, кто делал коммерческое приложение, писал свою версию провайдера корзины: методы добавления, обновления и удаления позиций, применение скидок, работу с валютой, состояние ошибок, синхронизацию между вкладками браузера. В новой версии Hydrogen состояние корзины подключается одним импортом хука useCart, а не переписывается заново в каждом проекте.

Что это значит

Vercel и Shopify выносят повторяющуюся логику интернет-магазинов — форматирование цен, состояние корзины — в общий открытый слой, который чинится и улучшается один раз для всех, вместо того чтобы каждая команда решала одни и те же задачи заново на своём стеке.

Частые вопросы

На каких фреймворках можно использовать новый Hydrogen?

Фреймворк runtime-agnostic и явно поддерживает Svelte, Nuxt, Next.js, а также позволяет подключить собственный фреймворк разработчика.

Из каких слоёв состоит новая архитектура Hydrogen?

Разработчики выделяют три слоя: core (общая логика работы с Shopify API), client (состояние UI и корзины) и server.