クライアントサイドのレンダリング済みコンポーネントを使用したESI パーソナライゼーションキャッシュ用のAEM ソリューション

Edge Side Includes (ESI)を、サーバーレンダリングされたHTML フラグメントとして返される代わりにクライアント上でレンダリングされるコンポーネントと共に使用すると、パーソナライズされたコンテンツが期待どおりに動作しない場合があります。 ESI ユースケースのサーバーレンダリングされたフラグメントエンドポイントに実装を調整するか、クライアントレンダリングのままのコンポーネントにクライアントサイドアプローチを使用すると、問題を解決できます。

説明 description

環境

Adobe Experience Manager as a Cloud Service

問題/症状

  • Adobe Experience Manager as a Cloud Service パブリッシュページでパーソナライズされたコンテンツのESIを実装すると、予期しないキャッシュ動作が発生する場合があります。
  • 匿名ユーザーが公開ページのキャッシュをウォームアップする場合、認証済みユーザーは後でパーソナライズされたコンポーネントの匿名バージョンを確認するか、その逆が発生する可能性があります。
  • 影響を受けるコンポーネントには、ヘッダー、購読領域、またはユーザーのコンテキストによって異なることが予想されるその他のページ要素などの項目が含まれます。
  • パーソナライズされた出力が期待どおりにレンダリングされなくても、ログまたはブラウザーに明確なエラーメッセージが表示されない場合があります。
  • この問題を確認するには、キャッシュウォームアップ後の匿名セッションと認証済みセッションで同じページを比較し、影響を受けるコンポーネントがオリジンレスポンスでサーバーレンダリングされたHTMLとして返されるか、クライアントサイドのJavaScriptによって後でレンダリングされるかを確認します。

解決策 resolution

問題を解決するには、次の手順を試してください。

  1. パーソナライゼーションに使用されるコンポーネントが、オリジンからサーバーレンダリングされたHTML フラグメントとして返されるか、後でJavaScriptによってブラウザーでレンダリングされるかを確認します。

  2. パーソナライズされたコンテンツを組み立てるためにESIが必要な場合は、関連するコンポーネントを、別途含めることができるサーバーレンダリングのHTML フラグメントとして公開します。 ESIまたはApache Sling Dynamic Include設定を更新して、サーバーレンダリングされたフラグメントエンドポイントを参照するようにします。

  3. コンポーネントをクライアントサイドでレンダリングしたままにする必要がある場合は、ESIに依存してコンポーネントを組み立てる代わりに、そのコンポーネントにクライアントサイドのパーソナライゼーションパターンを使用します。

  4. 更新された実装を検証します。

    • 匿名セッションと認証済みセッションの両方でページをテストします。
    • 各セッションが、キャッシュウォームアップ後に、影響を受けるコンポーネントの想定されるバージョンを受け取ることを確認します。
    • オリジン応答に、ESIで処理されるコンポーネントの想定されるフラグメント出力が含まれていることを確認します。

関連トピックス

recommendation-more-help
experience-cloud-kcs-help-kbarticles