Vercelは6月30日(現地時間)、ニューヨークで開催されたイベント「Vercel Ship 26」にて、Shopifyと共同でECサイト向けフレームワークであるハイドロゲン (Hydrogen) をゼロから再構築すると発表した。この新しいバージョンはオープンソースで提供され、特定のランタイムに依存せず、JavaScriptが動作するあらゆる環境で利用可能となる。これにより、Svelte (スベルト)、Nuxt (ナクスト)、Next.jsなど多様なフレームワークで、より柔軟なストアフロント構築が実現する。
Vercelは、再構築されたハイドロゲン (Hydrogen) が、既存のSvelte (スベルト)、Nuxt (ナクスト)、Next.js、あるいは独自のカスタムフレームワークでも構築可能であると説明している。
今回の再構築における戦略は、Core、Client、Serverの3つのレイヤーで構成される。
Coreレイヤーは、これまで個別に記述されてきたShopify API向けのJavaScriptコードを集約する。これにより、Open Webで一般的に解決済みの課題に対する「Glueコード」の記述やメンテナンスが不要となり、API変更時のアップグレードが容易になる。
Clientレイヤーは、カートの状態管理など、ECアプリケーションで共通して必要とされる機能を提供する。これにより、開発者は自身のアプリケーションロジックに集中できる。この機能は現在、React 向けのHydrogenプレビューブランチで利用可能であり、今後さらに多くのフレームワークに対応する予定だ。
Serverレイヤーでは、スケーラブルなストアフロント構築のために開発者がフルスタックアクセスを持つことを可能にする。静的コンテンツはコンテンツデリバリーネットワーク (CDN) から即座に配信され、在庫などの動的データはストリームで供給される。Next.js、Nuxt、SvelteKitといったフルスタックフレームワークとの連携により、開発者はGraphQLクエリを記述し、Hydrogenが型安全なクライアントを提供する。Shopifyは既にヘッドレス販売チャネルを通じてこれらのフレームワークをサポートしているが、新しいハイドロゲンではドキュメント、テンプレート、スキルを通じて指針を提供し、既存のフレームワーク機能をShopify向けに最適化して活用することを促すとしている。
特定のフレームワークに依存しないこのアプローチは、ECフロントエンド開発における技術選定の柔軟性を飛躍的に高める。開発者はベンダーロックインのリスクを回避し、プロジェクトの特性や既存の技術スタックに最適なフレームワークを選択できる自由を得る。これにより、より幅広い開発者コミュニティの参画を促し、ECフロントエンド技術のイノベーションを加速させることが期待される。既存のヘッドレスCMSが提供するコンテンツ管理の柔軟性に加え、HydrogenはEC固有の商取引ロジックに深く統合された高機能なフレームワークとして、開発組織が持続可能で将来の変化に対応しやすいアーキテクチャを構築するための新たな選択肢を提供する。
参考: Vercel Blog (アーカイブ) — 2026年6月30日 13:00 (JST)