JSS Reactアプリにおけるルーティングおよび状態管理

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

src/index.jsファイルのアプリの主要なクライアント側エントリーポイントから、以下はクライアント側ルーティングの流れを説明します。

• ファイル src/index.js ではSSRのデータと状態が収集され、 コンポーネントに渡されます。
• ファイル src/AppRoot.js では、ルーターがアプリのルートに応答し、それを に渡すように設定されています。
• ファイル src/RouteHandler.jsでは、現在のルートのレイアウトサービスデータを取得し、アプリのルートおよび言語状態が維持されます。ルートデータは コンポーネントに渡されます。
• Layout.jsでは、JSSアプリのシェルHTMLおよびグローバル要素、そしてそのルート(s)がレンダリングされます。
• ルートの残りの構造はルートデータによって定義され、各プレースホルダーにどのコンポーネントとそのコンテンツデータが存在するかを定義します。

サーバーサイドルーティング

ReactアプリがNodeサーバーによってプリレンダリングされると、最初の応答でクライアントにHTMLを返します。つまり、ルートデータフローはクライアント側のルーティングに似ていますが、いくつかの重要な違いがあります。

以下は、サーバー側のルートデータフローがクライアント側のルーティングとどのように異なるかを説明します。

• 最初のステップは適用モードによって異なります:
  • 統合モードのみでは、Sitecoreがリクエストを受け取り、サーバー側でルート解析を行い、リクエストされたアイテムがJSSアプリケーションで処理されるかどうか、そして複数のJSSアプリケーションがSitecoreに展開されている場合にどのバンドルを実行するかを決定します。
  • ヘッドレスモードのみでは、Node SSRプロキシがリクエストを受け取り、それをSitecoreレイアウトサービスに渡します。
• ノードホストは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() メソッドを使うことができます。