Vercel と Shopify が Hydrogen を再構築
Vercel と Shopify は、Hydrogen のランタイム非依存化とオープンソース化を宣言し、開発者が Next.js や SvelteKit など任意のフレームワークでヘッドレスストアを構築できる新たな基盤を再構築すると発表した。
キーポイント
ランタイム非依存性とオープンソース化
新バージョンは JavaScript が動作するあらゆる環境（Vercel 以外）で実行可能となり、Svelte、Nuxt、Next.js や独自フレームワークのサポートを明言している。
コア層の標準化とコード削減
Shopify API の複雑なデータ型（MoneyV2 など）を処理する「グルーコード」を一元化し、API 変更時の対応やバグ修正を簡素化する。
クライアント層のベストプラクティス統合
カート状態管理などの共通ロジックをライブラリとして提供し、開発者が独自の実装に時間を費やすことなく標準的な機能を実装できるようにする。
サーバー層におけるフレームワークの自由化
Next.js や Nuxt などのオープンソースフルスタックフレームワークを直接使用でき、Vercel の独自ランタイムへのロックインが解消される。
Hydrogen と Next.js の統合と標準化
Vercel.shop で得た知見を Hydrogen のクライアントおよびサーバー層に統合し、安定化後は同サイトを Hydrogen と Next.js を用いたストアフロント構築の参照実装として採用する。
ランタイムやプラットフォームへのロックイン回避
Hydrogen の目標は、特定のランタイム、フレームワーク、またはプラットフォームに縛られることなく、最高の開発者体験を提供することにある。
影響分析・編集コメントを表示
影響分析
この発表は、E コマースフロントエンド開発におけるベンダーロックインの打破と、オープンソースエコシステムとの統合を意味する重要な転換点です。開発者は Shopify の強力な API を維持しつつ、自身の技術スタックやデプロイ環境を選べるようになり、市場全体の開発効率と柔軟性が向上します。
編集コメント
Vercel と Shopify の強力な連携により、ヘッドレスコマース開発の「敷居」と「柔軟性」が同時に解決される画期的な動きです。特にランタイム非依存化は、開発者の選定権を奪う従来の SaaS モデルからの脱却を象徴しています。
Hydrogen はヘッドレスストアフロントを簡単に出荷可能にしましたが、移植性は低いものでした。ニューヨークで開催された Vercel Ship 26 で、私たちは Shopify と協力して Hydrogen をゼロから再構築していることを発表しました。これはよりオープンなウェブに向けた共有の賭けです。
新バージョンはオープンソースであり、ランタイム非依存です。つまり、JavaScript が動作するあらゆる場所で実行可能です。Svelte、Nuxt、Next.js で構築することもできますし、独自のフレームワークを持ち込むこともできます。
私たちの戦略には 3 つのレイヤーが含まれています：コア（core）、クライアント（client）、サーバー（server）。
コア
コアは、これまで Shopify API のために書き、共有されなかった JavaScript です。それが今では一つの場所に集約されました。
formatMoney を例に挙げましょう。オープンウェブではすでに Intl.NumberFormat によってこの問題のほとんどが解決されています。
しかし、Shopify API は数値を直接渡すわけではありません。代わりにカスタム型である MoneyV2 を返し、金額は文字列としてシリアライズされた符号付き小数です。
結果は同じですが、あなたはもはや接着コード（glue code）を書いたり維持したりする必要はありません。API が変更されても、アップグレードは極めて簡単です。
コアを一元化することで、バグは一度だけ修正し、改善点を全員に提供し、再び構築に集中できます。
クライアント
コアが返すものをレンダリングするには、同じような繰り返しのある判断が必要です。カート状態（cart state）はその典型例です。
コマースアプリを構築した経験がある人なら誰でも、これのバージョンを書いたことがあるはずです。毎回異なるコードで、すべてが同じ目的を追っています。
Hydrogen では、クライアントレイヤーが今やカートを処理します。状態管理は単一のインポートで済みます。
これを一元化すれば、ベストプラクティスが無料で得られ、実際にあなたが構築すべき部分に時間を割くことができます。これは今日、React に対して Hydrogen のプレビューブランチで利用可能であり、他のフレームワークも順次対応していきます。
サーバーサイド
スケーラブルなストアフロントを構築する際、パフォーマンスを犠牲にすることなくフルスタックへのアクセスが必要です。静的コンテンツは CDN から即座に提供され、在庫などの動的データはストリーミングで取り込まれます。
オープンソースコミュニティは、Next.js、Nuxt、SvelteKit といったフレームワークによってこの課題を解決しました。これらは、独自ランタイムへのロックインなしでフルスタック機能を備えています。
例えば、ストアフロントがオンデマンド再検証機能付きで製品クエリをキャッシュする場合を考えましょう。GraphQL クエリはあなたが記述し、Hydrogen が型安全なクライアントを提供します。Next.js がキャッシングを処理し、あなたはフルスタックフレームワークとヘッドレス Shopify API を組み合わせながら、骨組みとなるコード（glue code）を書く必要もありません。
Shopify はすでに Headless セールスチャネルを通じてこれらのフレームワークをサポートしていますが、これまで私たちはそれぞれが同じ API 契約に対して独自のバインディングを実装してきました。このレイヤーにおける解決策は、より多くのコードではなくガイダンスです。人間もエージェントも、これらのフレームワークが既に持っている機能を Shopify のために再発明するのではなく、それらをどのように活用すべきかを知る必要があります。
そのガイダンスは、ドキュメント、テンプレート、スキルとして提供されます。
vercel.shop との関係について
Hydrogen 以前、私たちはアジェンティック・コマース（agent commerce）向けの独自テンプレートである vercel.shop を構築していました。これは Next.js と Shopify を組み合わせてヘッドレス化を容易にするものです。
うまくいき、今後はさらに一歩進めます。vercel.shop を構築する過程で学んだことをすべて、クライアント層とサーバー層の両方で Hydrogen に統合します。Hydrogen が安定したら vercel.shop で採用し、Hydrogen と Next.js を用いてストアフロントを構築するためのリファレンスとして位置づけます。
今後に向けて
Vercel の目標はシンプルです：すべての人のために、より良いウェブを構築することです。
Hydrogen においては、ランタイム、フレームワーク、またはプラットフォームにロックインされることなく、最高の開発者体験を提供することを意味します。
私たちはオープンな姿勢でこのプロジェクトを進めています。GitHub でフォローしていただき、実際に試したり、フォークしたりして、次なるステップの形成にご協力ください。
続きを読む
原文を表示
Hydrogen made headless storefronts easy to ship, but not portable. At Vercel Ship 26 in New York, we announced that we are working with Shopify to rebuild it from the ground up, a shared bet on a more open web.
The new version is open source and runtime agnostic, meaning it can run anywhere JavaScript does. You can build with Svelte, Nuxt, Next.js or even bring your own custom framework.
Our strategy includes three layers: core, client and server.
The core
Core is the JavaScript we all used to write for the Shopify API, and never shared. Now it lives in one place.
Take formatMoney. The open web already solved most of this with Intl.NumberFormat.
But the Shopify API doesn't hand you a number. It responds with a custom type, MoneyV2, and the amount is a signed decimal number serialized as a string.
The result is the same, but you’re not writing or maintaining the glue code anymore. When the API changes, the upgrade is trivial.
Centralize the core and you fix each bug once, ship improvements to everyone, and get back to building.
The client
Rendering what the core returns involves the same repeated decisions. Cart state is the obvious one.
Anyone who's built a commerce app has written a version of this. Different code every time, all chasing the same things.
With Hydrogen, the client layer now handles the cart. State management becomes one import.
Centralize this and you get the best practices for free, so you can spend your time on the parts that are actually yours to build. It's available for React today on the Hydrogen preview branch, with more frameworks coming.
The server
Developers need full-stack access to build storefronts that scale without sacrificing performance. Static content should serve instantly from a CDN while dynamic data like inventory streams in.
The open-source community solved this with frameworks like Next.js, Nuxt, and SvelteKit: full-stack capabilities with no lock-in to a proprietary runtime.
Say your storefront caches product queries with on-demand revalidation. You write the GraphQL query. Hydrogen gives you a type-safe client. Next.js handles caching, and you get full-stack frameworks plus the headless Shopify API with none of the glue code.
Shopify already supports these frameworks through its Headless sales channel, but until now we’ve each written our own bindings to the same API contract. At this layer, the fix is guidance, not more code. Humans and agents both need to know how to use what these frameworks already do, instead of reinventing it for Shopify.
That guidance ships as documentation, templates, and skills.
How it relates to vercel.shop
Before Hydrogen, we built vercel.shop, our own template for agentic commerce. It makes going headless with Next.js and Shopify easier.
It worked, and now we're going further. We'll fold everything we learned building vercel.shop into Hydrogen at the client and server layers. Once Hydrogen is stable, vercel.shop adopts it and becomes our reference for building storefronts with Hydrogen and Next.js.
Going forward
Vercel’s goal is simple: build a better web, for everyone.
With Hydrogen, that means the best developer experience without locking you into a runtime, framework, or platform.
We're building this in the open. Follow along on GitHub: try it, fork it, and help shape what comes next.
Read more
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み