SPAおよびサーバー側のレンダリング

メモ

SPAフレームワークベースのクライアント側レンダリング(ReactやAngularなど)を必要とするプロジェクトには、SPA Editorが推奨されるソリューションです。

メモ

SPAサーバー側のレンダリング機能を使用するには、このドキュメントで説明するようにAEM 6.5.1.0以降が必要です。

概要

シングルページアプリ(SPA)では、ユーザーに対して、ネイティブアプリケーションと同様、慣れ親しんだ方法で反応し、動作するリッチで動的なエクスペリエンスをオファーできます。 これは、クライアントに依存して前もってコンテンツを読み込み、ユーザーの操作を処理する手間が省け 、クライアントとサーバーの間で必要な通信量を最小限に抑えて、アプリケーションをより反応しやすくすることで達成できます。

ただし、SPAのサイズが大きく、コンテンツが豊富な場合など、初期読み込み時間が長くなる可能性があります。 読み込み時間を最適化するために、コンテンツの一部はサーバーサイドでレンダリングできます。 サーバー側レンダリング(SSR)を使用すると、ページの初期読み込みを高速化し、クライアントにさらにレンダリングを渡すことができます。

SSRを使用するタイミング

SSRは、すべてのプロジェクトで必要ではありません。 AEMはSPA向けにJS SSRを完全にサポートしていますが、Adobeは、すべてのプロジェクトに対して体系的にJS SSRを実装することを推奨しません。

SSRの導入を決定する際は、まず、SSRの追加の複雑さ、取り組み、コストの追加について、長期的なメンテナンスを含め、プロジェクトに対してSSRを現実的に示すものを見積もる必要があります。 SSRアーキテクチャは、付加価値が予測コストを明確に上回る場合にのみ選択する必要があります。

次の質問に対して「はい」と明確な意味を持つ場合、通常、SSRは値を提供します。

  • SEO: トラフィックをもたらす検索エンジンによって、サイトのインデックスを適切に作成するには、SSRが実際に必要ですか。 メインの検索エンジンクローラーがJSを評価するようになったことに注意してください。
  • ページ速度: SSRは、実際の環境の速度を測定可能に向上させ、全体的なユーザーエクスペリエンスを増やしますか。

この2つの質問のうち少なくとも1つに対し、明確な「はい」を付けて回答した場合にのみ、プロジェクトでSSRの実装がAdobeに推奨されます。 次の節では、Adobe I/O Runtimeを使ってこれを行う方法について説明します。

Adobe I/O Runtime

プロジェクト にSSRの実装が必要であると確信できる場合は、Adobeが推奨するソリューションはAdobe I/O Runtimeを使用することです。

Adobe I/O Runtimeについて詳しくは、

次の節では、2つの異なるモデルで、SPAにSSRを実装する際にAdobe I/O Runtimeを使用する方法について詳しく説明します。

メモ

Adobeでは、AEM環境(作成者、発行、ステージなど)ごとに個別のAdobe I/O Runtimeインスタンスを作成することをお勧めします。

リモートレンダラーの設定

AEMは、リモートレンダリングされたコンテンツをどこで取得できるかを知っている必要があります。 SSRにどのモデル を実装するかに関係なく 、AEMにこのリモートレンダリングサービスへのアクセス方法を指定する必要があります。

これは、RemoteContentRenderer - Configuration Factory OSGiサー ビスを介して行われます。 のWebコンソール設定コンソールで、文字列「RemoteContentRenderer」を検索し http://<host>:<port>/system/console/configMgrます。

レンダラーの設定

この設定では、次のフィールドを使用できます。

  • コンテンツパスパターン — 必要に応じて、コンテンツの一部を一致させるための正規式。
  • リモートエンドポイントURL — コンテンツの生成を担当するエンドポイントのURL。
    • ローカルネットワークにない場合は、保護されたHTTPSプロトコルを使用します。
  • 追加の要求ヘッダー — リモートエンドポイントに送信される要求に追加するヘッダー
    • パターン: key=value
  • 要求タイムアウト — リモートホスト要求のタイムアウト(ミリ秒)
メモ

AEM駆動の通信フロー Adobe I/O Runtime駆動のフローのどちらを実装するかに関係なく、リモートコンテンツレンダラー設定を定義する必要があり ます。

また、カスタムNode.jsサーバーを 使用する場合は、この設定も定義する必要があります。

メモ

この設定では、 リモートコンテンツレンダラーが利用されます。このレンダラーには 、追加の拡張機能とカスタマイズオプションが用意されています。

AEM主導の通信フロー

SSRを使用する場合、AEMのSPAの コンポーネントインタラクションワークフロー には、Adobe I/O Runtimeでアプリの初期コンテンツが生成される段階が含まれます。

  1. ブラウザはAEMからSSRコンテンツを要求します。

  2. AEMは、モデルをAdobe I/O Runtimeに投稿します。

  3. Adobe I/O Runtimeは生成されたコンテンツを返します。

  4. AEMは、バックエンドページコンポーネントのHTLテンプレートを介してAdobe I/O Runtimeから返されるHTMLを提供します。

server-side-rendering-cms-drivenaemnode-adobeio

Adobe I/O Runtime主導の通信流

前の節では、AEMのSPAでAEMがコンテンツのブートストラップと提供を実行する場合に、サーバー側のレンダリングの標準的な実装および推奨される実装について説明します。

あるいは、SSRを実装して、Adobe I/O Runtimeが通信フローを効果的に逆転させ、ブートストラップを行うようにすることもできます。

どちらのモデルも有効で、AEMではサポートされています。 ただし、特定のモデルを実装する前に、それぞれのメリットとデメリットを考慮する必要があります。

ブートストラップ メリット デメリット
aem経由
  • AEMは、必要に応じてライブラリの挿入を管理
  • リソースはAEMでのみ保守する必要がある
  • SPA開発者に馴染みのない
adobe i/o runtime経由
  • SPA開発者の知り合い
  • CSSやJavaScriptなどのアプリケーションに必要なClientlibリソースは、AEM開発者が allowProxy プロパティを使用して使用できるようにする必要があります
  • リソースはAEMとAdobe I/O Runtimeの間で同期する必要があります
  • SPAのオーサリングを可能にするには、Adobe I/O Runtimeのプロキシサーバが必要になる場合があります

SSRの計画

通常は、アプリケーションの一部のみをサーバー側でレンダリングする必要があります。 一般的な例として、ページの初回読み込み時に一画面に表示されるコンテンツはサーバー側に表示されます。 これにより、既にレンダリングされたコンテンツをクライアントに配信することで時間を節約できます。 ユーザーがSPAとやり取りすると、追加のコンテンツがクライアントによってレンダリングされます。

SPAに対してサーバー側のレンダリングを実装する場合は、アプリのどの部分が必要かを確認する必要があります。

SSRを使用したSPAの開発

SPAコンポーネントは、クライアント(ブラウザー内)またはサーバー側でレンダリングできます。 サーバー側がレンダリングされる場合、ウィンドウのサイズや場所などのブラウザープロパティは存在しません。 したがって、SPAのコンポーネントは同形的なものであり、レンダリングされる場所を前提としません。

SSRを利用するには、サーバ側のレンダリングを担当するAdobe I/O Runtimeだけでなく、AEMにもコードをデプロイする必要があります。 ほとんどのコードは同じですが、サーバー固有のタスクは異なります。

AEMのSPA向けSSR

AEMのSPA向けSSRでは、Adobe I/O Runtimeが必要です。これは、アプリケーションコンテンツサーバー側のレンダリングのために呼び出されます。 アプリのHTL内で、コンテンツをレンダリングするためにAdobe I/O Runtimeのリソースが呼び出されます。

AEMが標準でAngularおよびReact SPAフレームワークをサポートするのと同様に、AngularおよびReactアプリケーションでもサーバー側のレンダリングがサポートされます。 詳しくは、両方のフレームワークのNPMドキュメントを参照してください。

単純な例については、 We.Retailジャーナルアプリを参照してください。 アプリケーションサーバー側全体がレンダリングされます。 これは実際の例ではありませんが、SSRの実装に必要なものを示しています。

注意

We.Retailジャーナルアプリは、デモ目的でのみ使用され 、推奨されるAdobe I/O Runtimeではなく、単純な例としてNode.jsを使用します。 この例は、どのプロジェクト作業にも使用しないでください。

メモ

AEMプロジェクトでは、 AEM Project Archetype(プロジェクトアーキタイプ)を活用する必要があります。このアーキタイプは、ReactまたはAngularを使用するSPAプロジェクトをサポートし、SPA SDKを利用します。

Node.jsの使用

Adobe I/O Runtimeは、AEMでSPAにSSRを実装する場合に推奨されるソリューションです。

オンプレミスAEMインスタンスの場合は、上記と同様に、カスタムNode.jsインスタンスを使用してSSRを実装することもできます。 これはAdobeでサポートされていますが、お勧めしません。

メモ

Node.jsは、AdobeがホストするAEMインスタンスではサポートされていません。

メモ

SSRをNode.js経由で実装する必要がある場合、AdobeではAEM環境(作成者、発行、ステージなど)ごとに個別のNode.jsインスタンスを推奨します。

リモートコンテンツレンダラー

AEMでSPAのでSSRを使用するために必要な リモートコンテンツレンダラー設定 (をタップすると、ニーズに合わせて拡張およびカスタマイズできる、より汎用的なレンダリングサービスが提供されます)。

RemoteContentRenderingService

RemoteContentRenderingService は、AdobeI/Oからなど、リモートサーバーでレンダリングされるコンテンツを取得するOSGiサービスです。リモートサーバーに送信されるコンテンツは、渡されたリクエストパラメーターに基づきます。

RemoteContentRenderingService は、追加のコンテンツ操作が必要な場合に、カスタムSlingモデルまたはサーブレットに依存関係を反転して挿入できます。

このサービスは、RemoteContentRendererRequestHandlerServletによって内部的に使用され ます

RemoteContentRendererRequestHandlerServlet

を使用 RemoteContentRendererRequestHandlerServlet して、リクエストの設定をプログラムで設定できます。 DefaultRemoteContentRendererRequestHandlerImplでは、デフォルトのリクエストハンドラーの実装が提供されており、コンテンツ構造内の場所をリモートエンドポイントにマップするために、複数のOSGi設定を作成できます。

カスタム要求ハンドラーを追加するには、インター RemoteContentRendererRequestHandler フェイスを実装します。 コンポーネントのプロパティは、100より大きい整数(ランク)に設定して Constants.SERVICE_RANKINGDefaultRemoteContentRendererRequestHandlerImplださい。

@Component(immediate = true,
        service = RemoteContentRendererRequestHandler.class,
        property={
            Constants.SERVICE_RANKING +":Integer=1000"
        })
public class CustomRemoteContentRendererRequestHandlerImpl implements RemoteContentRendererRequestHandler {}

デフォルトハンドラのOSGi設定の設定

デフォルトハンドラーの設定は、「 リモートコンテンツレンダラーの設定」の説明に従って設定する必要があります。

リモートコンテンツレンダラーの使用

サーブレットがページに挿入可能なコンテンツを取得して返すには:

  1. リモートサーバーがアクセス可能であることを確認します。
  2. AEMコンポ追加ーネントのHTLテンプレートに対する次のスニペットの1つです。
  3. 必要に応じて、OSGi設定を作成または変更します。
  4. サイトのコンテンツを参照する

通常、ページコンポーネントのHTLテンプレートは、この機能のメイン受信者です。

<sly data-sly-resource="${resource @ resourceType='cq/remote/content/renderer/request/handler'}" />

要件

このサーブレットでは、Slingモデルエクスポーターを利用してコンポーネントデータをシリアライズします。 デフォルトでは、との両方がSlingモデルアダプタ com.adobe.cq.export.json.ContainerExporter としてサポート com.adobe.cq.export.json.ComponentExporter されています。 必要に応じて、リクエストを適用してを使用し実装する必要があるクラス RemoteContentRendererServlet を追加でき RemoteContentRendererRequestHandler#getSlingModelAdapterClassesます。 追加のクラスは、を拡張する必要があり ComponentExporterます。

このページ