Adobe Commerce、Commerce integration framework、Adobe Experience Managerを使用してエクスペリエンスを大規模に提供

CIFをコネクタとして使用するAEMとAdobe Commerceの統合パターンとして推奨されるのは、AEMがプレゼンテーションレイヤー（「glass」）とAdobe Commerceを所有し、コマースバックエンドを「ヘッドレス」バックエンドとして機能させる場合です。 この統合アプローチでは、AEMのオーサリング、パーソナライズおよびオムニチャネル機能と、Adobe Commerceの e コマース運用という、各アプリケーションの強みを活用します。

AEM/CIF/Adobe Commerce環境では、e コマースサイトの訪問者は最初にAEMに到達します。 AEMは、リクエストされたページが dispatcher キャッシュ内で使用可能かどうかを確認します。 ページが存在する場合は、このキャッシュされたページが訪問者に提供され、それ以上の処理は必要ありません。 Dispatcher が要求されたページを含んでいない場合や有効期限が切れている場合は、Dispatcher はAEM パブリッシャーにページのビルドを要求し、パブリッシャーは必要に応じて e コマースデータでAdobe Commerceを呼び出して、ページのビルドを行います。 次に、構築されたページが Dispatcher に渡されて訪問者に提供され、キャッシュされるので、他の訪問者からの同じページに対する後続のリクエストで、サーバーにさらに読み込む必要がなくなります。

サーバーサイドレンダリングとクライアントサイドレンダリングの組み合わせをAEM/CIF/Adobe Commerce モデルで使用できます。静的コンテンツを提供するサーバーサイドレンダリングと、特定のコンポーネントに対してAdobe Commerceを直接呼び出して、頻繁に変化する動的コンテンツや個人的な動的コンテンツを提供するクライアントサイドレンダリングです。
ユーザーのブラウザー内から。

AEM e コマースストアフロントの例の製品詳細ページの様々なコンポーネントの例を、次の例に示します。

サーバーサイドレンダリング

Product Detail Page （PDP）や Product Listing Page （PLP）などの E コマースページは、頻繁に変更される可能性は低く、AEM CIFコアコンポーネントを使用してサーバーサイドでレンダリングされた後に完全にキャッシュするのに適しています。 ページは、AEMで作成された汎用テンプレートを使用して、AEM パブリッシャーでレンダリングする必要があります。 これらのコンポーネントは、GraphQL API を介してAdobe Commerceからデータを取得します。 これらのページは動的に作成され、サーバーにレンダリングされた後、AEM Dispatcher にキャッシュされてブラウザーに配信されます。 この例は、上の例の紫色のボックスに表示されています。

クライアントサイドレンダリング

在庫数、可用性、価格などのより動的な属性が表示される場合（例えば製品詳細ページ（PDP）で）、クライアントサイドのコンポーネントを使用できます。 上記のサーバーサイドレンダリングアプローチを使用して Dispatcher 上にテンプレートページを作成しキャッシュできますが、静的ページ内には、動的なクライアントサイド web コンポーネントを配置できます。 これらの動的コンポーネントは、GraphQL API を介してAdobe Commerceからクライアントのブラウザーで直接データを取得し、PDP でリアルタイムに現在の価格や在庫レベルなどを確認できます。 これにより、通常はリアルタイムで表示することが重要なコンテンツが、ページ読み込み時に常に取得されるようになります。 この例は、上記の例の赤いボックスに表示されます。

AEM テンプレートとクライアントサイドのレンダリングの組み合わせは、チェックアウトプロセスの間にも使用できます。クライアントサイドの買い物かごコンポーネントは、買い物かご、チェックアウトフォーム、支払いサービスプロバイダーとの統合をレンダリングします。 このハイブリッドアプローチは、アカウントの作成、アカウントへのログイン、パスワードを忘れるなどの、Adobe Commerce アカウント管理機能にも使用できます。