ShopifyのHydrogenやOxygenを知らなかったので調べた
Hydrogen
こちらが参考になった www.smashingmagazine.com
Hydrogenはオンラインストアのサイト（ストアフロント）構築の複雑さを解消し、ブランドを際立たせる体験の構築に集中させることを目的としたReact ベースのフレームワーク
Shopifyはオンラインストアの経験から商取引の未来は動的にパーソナライズされていることだと考え、動的な取引を有効にするには、サーバーとクライアントの緊密なインテグレーション、最適化されたストリーミングやデータフェッチ戦略、および大規模に動作するプラットフォームが必要ということでHydrogen開発に取り組んできたとのこと
オンラインストアはバックオフィス業務の接続から、A / Bテストおよび各顧客のパーソナライズなど動的でなければならないことが多いので、基盤はSSRで構築し、その上にキャッシングや事前レンダリング、エッジ配信などの機能を実装している
以下の記事では動的なパーソナライズのためのHydrogenの主な特徴の話をしている
Hydrogenの主な特徴は以下
- Reactのサスペンスを利用した高速ファーストレンダリングのためのストリーミングサーバーサイドレンダリング
- 効率的なレンダリング後のコンポーネントレベルの状態更新のためのReactサーバーコンポーネント
- スマートキャッシュを使用した効率的なサーバーおよびクライアントデータフェッチプリミティブ
- 動的なエッジ配信のための柔軟なページキャッシュとリクエストキャッシュ制御
Streaming SSRやReactサーバーコンポーネントについては以前まとめた
【Next.js】Next.js 12のNew Streaming SSR - UGA Boxxx
【Next.js】Next.js 12のReact Server Components - UGA Boxxx
Next.js以外にもReact18の機能を取り込もうとしているフレームワークがあることを知って驚いた
そして、Next.jsにおけるVercelと同じ？ようにキャッシュを使用してHydrogenを効率よく稼働するためのデプロイ環境がOxgenらしい
Oxygen
OxygenはHydrogenをデプロイするための shopify.dev
Oxygenは、Shopifyがホストする新しいV8 Isolateを利用したJavaScriptワーカーランタイム
OxygenにHydrogenをデプロイすると、Hydrogenサーバーコンポーネントはローカルホスト速度でStorefront APIにクエリを実行する
ファーストパーティのフェッチの場合は、ストアデータとレンダリングが同じサーバー側にあるためミリ秒単位で処理し、サードパーティのフェッチの場合は、スマートキャッシュとキャッシュ戦略で拡張された標準のFetchAPIを使うことで高速に処理することができる
いまのところOxygenは、一部の加盟店で早期アクセスプレビューを行っているだけで一般利用はできないとのこと
他参考
https://shopify.dev/custom-storefronts/hydrogen/framework/cache
