SPA およびサーバーサイドレンダリング

メモ

シングルページアプリケーション(SPA)エディタ機能には、AEM 6.4サービスパック2以降が必要です。

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

メモ

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

概要

シングルページアプリ(SPA)では、多くの場合ネイティブアプリケーションと同様、使い慣れた方法で反応し、動作するリッチで動的なエクスペリエンスをオファーできます。 これは、コンテンツを事前に読み込こんでからユーザーとのやり取りを処理するという負荷のかかる作業をクライアントにまかせることで、クライアントとサーバーの間で必要な通信量を最小限に抑え、アプリケーションの反応を良くすることで達成できます。

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

SSR を使用するタイミング

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

SSR を実装することに決めたら、長期的なメンテナンスを含め、SSRを追加することがプロジェクトにとって現実的にどのような複雑さ、労力、コストをもたらすかをまず評価する必要があります。SSR アーキテクチャは、付加価値が予測コストを明確に上回る場合にのみ選択する必要があります。

次の質問のいずれかへの答えが明確に「はい」である場合、通常、SSR には価値があります。

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

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

Adobe I/O Runtime

プロジェクトにSSR](#when-to-use-ssr)の実装が必要であると確信している場合、Adobeが推奨するソリューションはAdobe I/O Runtimeを使用することです。[

Adobe I/O Runtime について詳しくは、以下を参照してください。

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

メモ

AEM 環境(オーサー、パブリッシュ、ステージなど)ごとに個別の Adobe I/O Runtime インスタンスを作成することをお勧めします。

リモートコンテンツレンダラーの設定

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

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

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

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

AEM駆動の通信フローAdobe I/O Runtime駆動のフローを実装する場合には、リモートコンテンツレンダラーの設定を定義する必要があります。

また、カスタムNode.jsサーバ](#using-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

Adobe I/O Runtime 主導の通信フロー

AEM駆動通信フローの節では、AEMがコンテンツのブートストラップと提供を行うSPAに関するサーバ側レンダリングの標準および推奨実装について説明します。

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

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

ブートストラップ メリット デメリット
AEM 経由 AEMは、必要な場所でライブラリの挿入を管理
リソースの管理のみがAEMで必要
SPA デベロッパーに馴染みのない場合がある
Adobe I/O Runtime 経由 SPA デベロッパーに馴染みがある CSSやJavaScriptなどのアプリケーションに必要なClientlibリソースは、AEM開発者がallowProxyプロパティ
ResourcesをAEMとAdobe I/O Runtime
の間で同期する必要があります。SPAのオーサリングを有効にするには、Adobe I/O Runtimeのプロキシサーバーが必要な場合があります

SSR の計画

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

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

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 プロジェクトアーキタイプを活用します。このアーキタイプは、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 で SSR を SPA と使用するために必要なリモートコンテンツレンダラー設定は、ニーズに合わせて拡張およびカスタマイズできる、より一般化されたレンダリングサービスです。

RemoteContentRenderingService

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

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

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

RemoteContentRendererRequestHandlerServlet

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

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

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

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

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

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

サーブレットがページにインジェクト可能なコンテンツを取得して返すには、以下をおこないます。

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

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

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

要件

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

このページ