Shopify Hydrogen と Shopify Oxygen の詳細

公開: 2022-04-22

Shopifyは、ビジネスでますます人気を博しています。カスタマイズが非常に簡単で、多くの利点があるため、企業はこの市場に参入して機会と顧客体験を拡大したいと考えています。したがって、オンライン市場は非常に競争が激しくなります。次に、企業は Shopify での店舗をより魅力的で便利なものにして、競合他社に勝つ方法を考えなければなりません。幸いなことに、ShopifyはShopify HydrogenとShopify Oxygenを立ち上げ、プロセスをよりシンプルにしました. したがって、この記事では、 Shopify Hydrogen と Shopify Oxygenについて詳しく紹介します。

Shopify HydrogenとShopify Oxygenについて知っておくべきハイライト機能

Shopify 水素の概要

Unite 2021 で発表された Shopify Hydrogen は、開発者が本当にユニークな Shopify ショップを作成できるようにする新しい React フレームワークです。 Hydrogen は、マーチャントに強力なツールとコンポーネントを提供する React および JavaScript ベースのプラットフォームです。この余分な容量により、ゼロから始めて、パーソナライズされたユニークなストアを作成できます.

Shopify 水素の仕組み

水素を使用してオーダーメイドの店舗を作成します。フレームワークとユーザーインターフェイスコンポーネントが含まれています。

水素のフレームワーク: Shopify Hydrogen は、サーバー側レンダリング (SSR)、ハイドレーションミドルウェア、およびクライアントコンポーネントのコード変換を含む Vite プラグインを提供します。

Hydrogen ユーザーインターフェースのコンポーネント: Hydrogen は、Shopify の機能とコンセプトをサポートするコンポーネント、フック、ユーティリティのセットです。

情報源: Hydrogen は、Shopify の Storefront API からのデータを処理するように設計されています。コンポーネント、フック、およびユーティリティに提供されるデータは、Storefront API の GraphQL タイプに一致し、準拠する形状を持っています。

Shopify Hydrogen は、サードパーティソースのデータのアシスタントになることができます。サードパーティのデータソースで Hydrogen コンポーネントを利用する場合は、まずサードパーティソースのデータを Hydrogen コンポーネント、フック、およびユーティリティで期待されるタイプに変更してから、コンポーネントに渡す必要があります。フック、およびユーティリティ。

Hydrogen をセットアップするために従うべきいくつかのベストプラクティス

マーチャントのストアを高速で、アクセスしやすく、見つけやすい状態に保つには、次の要因を考慮する必要があります。

パフォーマンス
アクセシビリティ
テスト

Shopify Hydrogen開発の指針となる原則があります

では、Shopify Oxygenとは？

簡単に言うと、Oxygen は Shopify が提供するホスティングサービスであり、Hydrogen で作成したストアをホストできるようにします。

酸素は、ストアが大量のトラフィックを処理して効果的なフラッシュセールやソーシャルプロモーションを実行するのに役立ちます. 大企業の Web サイトでさえ、大量のトラフィックが発生するとクラッシュすることがあります。このように、Oxygen は、サイトの円滑な運営を維持するための支援に努めています。

Shopify Hydrogenを使用すると確実に得られるメリット

カスタムストアフロントの確立を検討している場合、Shopify Hydrogen は次の利点を提供します。

デモストアテンプレート

Hydrogen は、Shopify カスタムストアフロントの作成を簡単にするデモストアテンプレートを提供します。定型コードが付属しており、Shopify サイトとシームレスに統合されます。さらに、箱から出してすぐに完全な購入体験を提供します。

Tailwind CSS ユーティリティパッケージと Shopify Hydrogen フレームワークのおかげで、デモストアテンプレートのスタイルを設定できます。 Tailwind のライブラリを使用するか、独自のスタイルを作成できます。

パフォーマンスの最適化

最適な速度を実現するために、Shopify Hydrogen のアーキテクチャでは、クライアント側とサーバー側の両方で静的データと動的データのフェッチを組み合わせることができます。最先端の Web テクノロジーと Web 開発へのアプローチにより、次の機能が提供されます。

速度とパフォーマンスのために、動的な情報を処理し、API 呼び出しを最小限に抑える組み込みのキャッシュコントロールがあります。
サーバー側は、初期負担を軽減する責任があります。
React Server Components は、独自の React プロジェクト向けのデータ取得およびレンダリングフローです。 React Server Components を使用した開発エクスペリエンスは、はるかに優れています。コンポーネントはすばやくレンダリングされるため、作成中の作業を確認できます。

迅速な開発

Hydrogen は、Shopify の基本的な技術スタックとコマーススキルを使用して、開発プロセスをスピードアップします。これは Storefront API と連携して動作し、高速なデータ取得を提供します。

Hydrogen には、Shopify 固有のコンポーネント、フック、およびコマースツールが含まれています。簡単にアクセスでき、高速で、すぐに使用できます。また、カスタムストアフロントを作成するために必要な初期の複雑さと定型文を減らすのにも役立ちます。

React.js

Shopify は、React.js を動的で迅速かつパーソナライズされた商取引の未来として支持しています。そして、React に投資するという Shopify の決定は、業界にとって重要な声明であることに賭けることができます。これにより、React.js は商取引の未来として、または物事が向かう先として、さらに信頼性が高まります。

以下のアイテムを含む初心者キットを受け取ります。

Hydrogen のアーリーアダプターは、サイトを立ち上げて実行するための基本的なテンプレートを受け取ります。最初のパッケージに含まれるもののリストを次に示します (考えてみてください: ボタン、トグル、ナビゲーション)。ほとんどの場合、アーリーアダプターとして自分でピースを作成する必要がありますが、開始するために使用できるビルド済みのコンポーネントがあります。

あなたのチームは水素の構築を支援できます

Shopify は、e コマース開発コミュニティからの支援を求めています。強力な社内開発チームがあれば、Shopify の助けを借りて、製品のビジョンを最初から設計することができます。

作成したコンポーネントは再利用できます

スターターキットを使い始めると、最終的なサイト全体で必要に応じて再利用できる初期パーツを設計できるようになります。

ただし、Shopify Hydrogen の潜在的な欠点に直面する必要があります。

ゼロから作成した開発者の負担が大きいワークフロー

Shopify フレームワークはヘッドレスになるメリットを提供しますが、開発者がすべてを Hydrogen で作成する必要があります。残念ながら、これは技術者以外のチームメンバーがサイトのフロントエンドレイヤーに変更を加えることができないことを意味します。 12月のShopifyタウンホールイベントの時点で、2022年の計画には短期または長期のドラッグアンドドロップツールはありません. 最終的に、この戦略は、すでに多数の開発リソースをスタッフに抱えている e コマースチームに適している可能性があります。

現在、利用可能なストアプレビューはありません

独自のプレビュー環境を作成する場合を除き、現在作成中の水素を利用したストアのリアルタイムプレビューを表示することはできません。これにより、e コマースチームの技術者以外のメンバーにとって実装が難しくなる可能性があります。

React サーバーコンポーネントを使用

Hydrogen の出力は、React サーバーコンポーネント (PWA) を使用するため、静的なプログレッシブ Web アプリにはなりません。プログラマーは、Shopify サーバー用のコードを作成する必要があります。補足として、React Server コンポーネントは非常に注目されており、新しいものです。「ベータ版」と呼んでもいいかもしれません。これは素晴らしいアイデアですが、多くの開発者はまだそれを受け入れていません。

独自のコンテンツ管理システム (CMS) をリンクする必要があります

今日、Shopify と Sanity は、Hydrogen ショップにコンテンツ管理システム (CMS) 機能を提供するために協力しています。 Sanity は開発者向けのサードパーティ CMS であり、チームはローコードコンテンツ管理用のコンテンツデータスキーマ (画像、テキスト、ビデオ) を構築できます。

現在のアプリのサポートは最小限です

Shopify は潜在的なアプリサポートの理想的なシナリオを定義していますが、そのサードパーティアプリエコシステムは現在初期段階にあります。当面の間、API はすべてに利用できるわけではありません。作成したものは、Shopify アプリストアとすぐには互換性がありません。使用する Shopify アプリごとに、独自のミドルウェアを設計する必要があります。

水素が液体代替物になるには程遠い

最近、多数のマーチャントがShopifyのテーマに投資しています。次に、Shopify は、Shopify Liquid テーマと、これらのテーマが現在サービスを提供している非技術的なオーディエンスから焦点を移します。 Hydrogen をヘッドレスオプションの候補として検討している場合は、このフレームワークが Liquid に追いつくまでに時間がかかる可能性があることに注意してください。

結論

この記事は、Shopify Hydrogen と Shopify Oxygen の基本的な理解があることを願って説明します。多くの素晴らしい機能を備えているため、オンラインストアの有効性を高めるために飛び込む価値があります. したがって、あなたのビジネスは顧客の需要を満たすことができ、インターネット環境で発展する機会が増えます. ただし、この技術についてまだ混乱している場合は、Magesolution がパートナーになり、ビジネスを支援します。この分野での多くの経験により、 Shopify Solutionsという最高のサービスを提供できると確信しています。したがって、ご不明な点がございましたら、お問い合わせください。