Vercel と Shopify が Hydrogen を再構築
本文の状態
日本語全文を表示中
詳細モードで約5分の本文を読めます。
同じ出来事の情報源
この情報源を基点に整理
Vercel Blog
Vercel はニューヨークで開催されたイベントで、Shopify と共同してヘッドレスストアフロント向けフレームワーク「Hydrogen」をゼロから再構築すると発表した。新バージョンはオープンソース化され、JavaScript 環境であればどこでも動作するランタイム非依存となる。
Source Article
元記事を日本語で読む
本文に関係しない購読案内、埋め込み通知、サイト内プロモーションは除いています。
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デイリーブリーフで今日の重要ニュースをまとめ読み