JSS Reactアプリでのルーティングと状態管理
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
サンプル アプリでは、レイアウト サービス (または切断モードのローカル ルート データ ファイル ) に基づく動的ルーティングを使用し、ルート/ナビゲーションの変更を使用してアプリの状態変更をトリガーします。プライマリ実行フローのトレースは、ルート設定から開始する必要があります。
クライアント側のルーティング
src/index.jsファイル内のアプリのメインクライアント側エントリポイントから始めて、クライアント側ルーティングのフローを以下で説明します。
-
このファイルではsrc/index.js SSRのデータと状態が収集され、<AppRoot> コンポーネントに渡されます。
-
ファイルsrc/AppRoot.jsでは、ルーターはアプリのルートに応答して <RouteHandler>に渡すように構成されています。
-
ファイルsrc/RouteHandler.jsでは、現在のルートのレイアウト サービス データが取得され、アプリのルートと言語の状態が維持されます。ルート データは <Layout> コンポーネントに渡されます。
-
Layout.jsでは、JSSアプリのシェルHTML要素とグローバル要素、およびそのルート<Placeholder>が表示されます。
-
ルートの残りの構造は、ルート データによって定義され、ルート データによって、各プレースホルダーに存在するコンポーネント (およびそのコンテンツ データ) が定義されます。
サーバー側のルーティング
ReactアプリがNodeサーバーによってプリレンダリングされると、最初の応答でクライアントにHTMLが返されます。つまり、ルート データ フローはクライアント側のルーティングと似ていますが、いくつかの重要な違いがあります。
次に、サーバー側のルート データ フローとクライアント側のルーティングの違いについて説明します。
-
最初のステップは、アプリケーションモードによって異なります。
-
統合モードの場合のみ、Sitecoreはリクエストを受信し、ルートをサーバー側で解析し、リクエストされたアイテムがJSSアプリケーションによって処理されるかどうか、Sitecoreに複数のJSSアプリケーションがデプロイされている場合はどのバンドルを実行するかを決定します。
-
ヘッドレス モードの場合のみ、Node SSRプロキシはリクエストを受信し、それをSitecoreレイアウト サービスに渡します。
-
-
Nodeホストは、server/server.jsファイル内のrenderView関数を呼び出します。関数の引数には、ルート データ/レイアウト サービスの出力が含まれます。
-
renderView関数は、次の手順を実行します。
-
サーバーサイドレンダリング (SSR) 時に使用するレイアウトとディクショナリのデータを受け取ります。
-
ルート コンポーネントsrc/AppRoot.jsでは、アプリの初期状態のSSRデータをメンバー sitecoreContextに格納します。この初期状態は、アプリケーションをラップするSitecoreContextコンポーネントに提供されます。
-
ReactのSSR機能を使用してアプリをHTMLにレンダリングします。
-
レンダリングされたアプリをindex.htmlテンプレートに埋め込み、メタデータとSSRの状態を設定します。SSR状態 (window.__JSS_STATE__) は、クライアント上のアプリの状態をリハイドレートするために使用され、初期ルート データのためにLayout Serviceを呼び出す必要がなくなります。
-
最終的なHTMLでレンダリング コールバック関数を呼び出します。
-
GraphQLを使用する場合、サンプルアプリはデフォルトでApollo GraphQLツールを使用して、renderToStringWithData() サーバー上のHTMLにアプリをレンダリングします。これにより、GraphQLクエリの非同期結果が評価されたサーバー側のレンダリングが可能になります。GraphQLを使用していない場合は、代わりにReactDOMServer.renderToString() 方法を使用できます。