1. Angular JSSサンプルアプリケーションの概要

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

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

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

サンプル アプリでは、レイアウト サービス (または切断モードのローカル ルート データ ファイル ) に基づく動的ルーティングを使用し、ルート/ナビゲーションの変更を使用してアプリの状態変更をトリガーします。プライマリ実行フローのトレースは、ルート設定から開始する必要があります。

クライアント側のルーティング

クライアント側のルーティングは、Webブラウザーで行われます。次に、クライアント側のルーティング フローについて説明します。

  • ルート変更(または初期ロード)は、src/app/routing/routing.module.tsで設定されたAngularルーティングをトリガーします。

  • ほとんどのURLはJSS catch-allルートにフォールスルーされますが、これはローカル アプリケーションがSitecoreで設定されたすべての潜在的なルート (アイテム/ページ) を認識していないために必要です。

  • キャッチオールルートは、パスではなくマッチャー、特にjssRouteMatcher機能で設定されます。この関数は、JssRouteBuilderServiceを使用してURLをSitecore形式のルートとして解析 /language/then/the/item/path/試みます。

  • jssRouteMatcher関数はlanguageパラメーターとserverRouteパラメーターを返し、これらは構成されたルート リゾルバーJssRouteResolverに提供されます。

  • JssRouteResolver最初にJssContextServiceでchangeRouteを呼び出します。

  • JssContextServiceクライアント側では、次のいずれかからルートを取得します。

    • サーバー レンダリングの直後に統合サーバーサイド レンダリング(SSR)モードまたはヘッドレス サーバーサイド レンダリング(SSR)モードで実行している場合、TransferStateからルート データを取得しようとします。ルート データには、サーバーサイド レンダリング状態が含まれている必要があります。これが発生すると、レイアウト サービスへのHTTP呼び出しはスキップされます。

    • それ以外の場合、ルート データはSitecoreレイアウト サービスへのHTTP呼び出しを通じて取得されます。

  • JssContextServiceは現在のルート状態を保持し、それをJssRouteResolverに戻します。ルートリゾルバーは、Experience Editorのサポートに必要なルーチンを実行します。

  • 最後に、設定されたルートコンポーネント(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に配置します。

  • ルートのレンダリングは、クライアント上と同様に続行されます。

この記事を改善するための提案がある場合は、 お知らせください!