JSS Angular サンプル アプリでのルーティングと状態の管理

Version: 20.x
日本語翻訳に関する免責事項

このページの翻訳は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 に設定します。

  • ルート レンダリングは、クライアントで行われる場合と同じように続行されます。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、