Vercel и Shopify переписывают Hydrogen: новый открытый фреймворк для headless-коммерции

Vercel и Shopify объявили о совместной перестройке Hydrogen — фреймворка для создания headless-витрин. Новая версия станет полностью открытой и будет работать в любой среде, поддерживающей JavaScript: Node.js, Deno, Bun, Cloudflare Workers и других. Это означает, что разработчики больше не привязаны к проприетарному runtime и могут выбирать любые инструменты для своих проектов. Анонс прозвучал на конференции Vercel Ship 26 в Нью-Йорке, и он способен изменить ландшафт headless-коммерции.

Почему это важно для разработчиков и бизнеса

Исходный Hydrogen упрощал запуск headless-магазинов, но оказался недостаточно портируемым. Разработчики были вынуждены использовать определённые технологии, что ограничивало гибкость. Новый подход устраняет vendor lock-in: теперь можно применять любые фреймворки, будь то Next.js, Nuxt, Svelte или собственные решения. Это расширяет экосистему Shopify и снижает барьеры для создания высокопроизводительных коммерческих приложений. Бизнес получает возможность быстрее запускать магазины на Shopify с современными JS-фреймворками, а сообщество open source — централизованную библиотеку для Shopify API, которую можно улучшать совместно.

Как изменится разработка headless-магазинов на Shopify?

Стратегия Vercel и Shopify включает три слоя: Core, Client и Server. Core — это централизованная логика для работы с Shopify API. Например, форматирование денег, которое раньше каждый разработчик писал сам, теперь реализовано через Intl.NumberFormat. При изменении API обновление сводится к одной правке. Client — клиентский слой, берущий на себя управление корзиной и другими повторяющимися задачами. Для React он уже доступен в preview-ветке Hydrogen, позже появятся адаптеры для других фреймворков. Server — серверный слой для полноценного доступа к данным: статика кешируется на CDN, динамические данные, например остатки товаров, стримятся в реальном времени.

Детали новой архитектуры Hydrogen

Новая архитектура Hydrogen построена на трёхуровневой модели. Core предоставляет единый интерфейс для работы с Shopify API, избавляя разработчиков от необходимости писать обёртки для каждого запроса. Client упрощает клиентскую часть, автоматизируя типовые сценарии, такие как добавление товаров в корзину или расчёт стоимости доставки. Server отвечает за производительность: статический контент кешируется на CDN, а динамические данные передаются через стриминг, что ускоряет загрузку страниц. Такой подход гарантирует, что обновления API обрабатываются единообразно, а баги фиксятся один раз для всех пользователей.

Что такое runtime-агностический фреймворк и почему это важно?

Runtime-агностический фреймворк может работать в любой среде выполнения JavaScript: Node.js, Deno, Bun, Cloudflare Workers и других. Это даёт разработчикам свободу выбора хостинга и инструментов. Раньше Hydrogen был привязан к определённому runtime, что ограничивало его использование. Теперь же можно развернуть магазин на любой платформе, которая поддерживает JavaScript, без дополнительных настроек. Это особенно важно для проектов, которые требуют высокой производительности или специфических условий хостинга.

Кого затронет обновление Hydrogen

Разработчики e-commerce получат портируемый, открытый инструмент без привязки к конкретному хостингу. Бизнес сможет быстрее запускать магазины на Shopify с современными JS-фреймворками, что сокращает время выхода на рынок. Сообщество open source получит централизованную библиотеку для Shopify API, которую можно улучшать совместно. Это означает, что каждый может внести свой вклад в развитие фреймворка, делая его более надёжным и функциональным.

Какие сроки выхода новой версии Hydrogen?

Точные сроки выхода финальной версии пока не раскрыты. Известно, что клиентский слой для React уже доступен в preview-ветке Hydrogen. Полный список поддерживаемых фреймворков также не объявлен. Неясно, будет ли Hydrogen полностью заменять старый фреймворк или сосуществовать с ним. Однако анонс на Vercel Ship 26 указывает на то, что работа ведётся активно, и релиз может состояться в ближайшие месяцы.

Пример использования: форматирование цены

Shopify API возвращает деньги в виде кастомного типа MoneyV2, который представляет собой число со знаком в строке, а не стандартный Number. Раньше разработчики писали обёртку для форматирования цены. Теперь эту задачу решает Core через Intl.NumberFormat. Если API изменится, обновление потребует лишь одной правки в Core, а не переписывания кода во всех проектах. Это экономит время и снижает риск ошибок.

Заключение

Перестройка Hydrogen — важный шаг для headless-коммерции. Открытый, runtime-агностический фреймворк даёт разработчикам больше свободы, а бизнесу — скорость и гибкость. Хотя точные сроки и детали пока неизвестны, ясно, что будущее Hydrogen обещает быть интересным. Следите за обновлениями от Vercel и Shopify, чтобы не пропустить релиз.