JSS Angular サンプル アプリでのルーティングと状態の管理
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
サンプル アプリでは、レイアウト サービス (または、切断モードのローカルのルート データ ファイル) に基づいて動的ルーティングを使用し、ルート/ナビゲーションの変更を使用して、アプリの状態の変更をトリガーします。プライマリ実行フローのトレースは、ルート設定を使用して開始する必要があります。
クライアント側のルーティング
クライアント側のルーティングは Web ブラウザーで行われます。次に、クライアント側のルーティング フローについて説明します。
-
ルートの変更 (または初期読み込み) は、
src/app/routing/routing.module.ts
で設定された Angular ルーティングをトリガーします。 -
ほとんどの URL は JSS キャッチオールに分類されます。これは、ローカル アプリケーションが、Sitecore で設定されているすべての潜在的なルート (アイテム/ページ) を認識していないために必要です。
-
キャッチオール ルートは、パスではなくマッチャーで設定されます。具体的には、
jssRouteMatcher
関数です。この関数は、JssRouteBuilderService
を使用して、Sitecore でフォーマットされたルート/[language]/then/the/item/path/
で URL の解析をしようとします。 -
jssRouteMatcher
関数は言語とserverRoute
パラメーターを返します。その後、このパラメーターは設定されたルート リゾルバーJssRouteResolver
に提供されます。 -
JssRouteResolver
は、JssContextService
でchangeRoute
を最初に呼び出します。 -
クライアント側の
JssContextService
は、次のいずれかからルートを取得します。-
サーバー レンダリングの直後に統合またはヘッドレスのサーバー サイド レンダリング (SSR) モードで実行すると、
TransferState
からルート データを取得しようとします。TransferState にはサーバー サイド レンダリング状態が含まれている必要があります。これが発生すると、レイアウト サービスへの HTTP 呼び出しはスキップされます。 -
それ以外の場合はすべて、ルート データは HTTP 呼び出しを通じて Sitecore レイアウト サービスにフェッチされます。
-
-
JssContextService
は現在のルート状態を保持し、その状態をJssRouteResolver
に返します。ルート リゾルバーはエクスペリエンス エディターのサポートに必要なルーチンを実行します。 -
最後に、設定されたルート コンポーネント(
routing.module.ts
で定義され、既定はapp/routing/layout/layout.component.ts
) は、src/app/app.component.ts
で定義されたルーター アウトレットに読み込まれ、ルート リゾルバーからのテータが提供されます。レイアウト コンポーネントは次の役割を果たします。-
HTTP 404 や 500 などのデータ フェッチ エラーの UI を処理します。
-
ページ タイトルやその他のメタ フィールドなど、ルート レベルの状態の更新。
-
ページ タイトルやその他のメタ フィールドなど、ルート レベルの状態の更新。
-
サーバー側のルーティングとデータ転送
Angular アプリが Node サーバーによって事前レンダリングされると、最初の応答でクライアントに HTML が返されます。つまり、ルート データ フローはクライアント側のルーティングに似ていますが、重要な違いがいくつかあります。
サーバー側のルート データ フローがクライアント側のルーティングとどのように異なるかについて、次に説明します。
-
最初の手順は、アプリケーション モードによって異なります。
-
統合モードでのみ、Sitecore は要求を受け取り、サーバー側でルートを解析して、要求されたアイテムが JSS アプリケーションによって処理されるかどうか、およびどのバンドルを実行するかを判断します。
-
ヘッドレス モードでのみ、Node SSR プロキシは要求を受け取り、その要求を Sitecore レイアウト サービスに渡します。
-
-
Node ホストは、
server.bundle.ts
アーティファクト内のrenderView
関数を呼び出します。関数の引数には、ルート データ/レイアウト サービスの出力が含まれます。 -
renderView
関数は、Angular SSR を使用してアプリケーションをレンダリングしますが、モジュールの初期化で、以下の 2 つの重要な相違点があります。-
アプリは、一部のサービスについてサーバー固有の実装を提供する
AppServerModule
を使用します。 -
ルートの初期状態は、
JSS_SERVER_TO_SSR
挿入トークンを使用した依存関係挿入によって挿入されます。
-
-
ルーティングはサーバー側で実行され、
JssService
のサーバー側の実装が呼び出されます。 -
JssServerService
は、JSS_SERVER_TO_SSR
挿入トークンからルート データを返し、また、クライアント側で読み取ることができるように、データをTransferState
に設定します。 -
ルート レンダリングは、クライアントで行われる場合と同じように続行されます。