Hydrogen / Oxygen（ハイドロジェン／オキシジェン）

• Hydrogen: Shopifyがヘッドレスコマース向けに提供するフロントエンド。Storefront APIでデータを取得し、ストアフロントを自由に構築する
• Oxygen: Hydrogenを世界中のエッジに配信するShopify公式のホスティング基盤（グローバルCDN）

ヘッドレスコマースを「外部のNext.js等で自作する」のではなく「Shopifyスタックの中で完結させる」ための公式アプローチ。Storefront APIとの認証統合、Oxygenでのエッジ配信、運用の一体化が利点になる。

Hydrogen自体の設計思想は移り変わってきた。初期はReact Server Componentsを軸にした独自色の強い作りだったが、その後Remixベースへ寄せ、RemixがReact Router v7へ統合された流れも取り込んだ。現在は「一枚岩のフレームワーク」から、Storefront API連携やカート管理などの部品を必要な分だけ使えるフレームワーク非依存のツールキットへと方向転換している。この変遷を理解しておくと、バージョン追従や技術選定の判断がぶれない。

当社のコーポレートサイト（flagship.inc）自体がHydrogenで構築されており、自社運用を通じてHydrogen／Oxygenの実装・運用知見を蓄積している。Storefront APIを軸にしたデータ取得、Oxygenでのデプロイ、Hydrogenの設計変遷への追従を実地で回しているため、案件ごとに「Hydrogen（Shopifyスタックで完結）か、Next.js等の外部フレームワークか」を、運用コストとチーム体制まで含めて判断できる。