---
title: "JSS Reactアプリにおけるルーティングおよび状態管理"
slug: "routing-and-state-management-in-the-jss-react-app"
abstract: "クライアントサイドおよびサーバーサイドのルーティングおよび状態管理フローの概要。"
---
# JSS Reactアプリにおけるルーティングおよび状態管理

サンプルアプリは [レイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service") (または切断モードのローカル [ルートデータファイル](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/types-of-jss-manifest-data.html "Types of JSS Manifest data") )に基づく動的ルーティングを使用し、ルートやナビゲーションの変更によってアプリの状態変更をトリガーします。主要な実行フローの追跡はルート設定から始めなければなりません。

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

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

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

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

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

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

-   最初のステップは適用モードによって異なります:
    -   [統合モード](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-integrated-mode.html "Start a JSS app in integrated mode")のみでは、Sitecoreがリクエストを受け取り、サーバー側でルート解析を行い、リクエストされたアイテムがJSSアプリケーションで処理されるかどうか、そして複数のJSSアプリケーションがSitecoreに展開されている場合にどのバンドルを実行するかを決定します。
    -   [ヘッドレスモードのみ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/headless-server-side-rendering-mode.html "Headless server-side rendering mode")では、Node SSRプロキシがリクエストを受け取り、それをSitecoreレイアウトサービスに渡します。
-   ノードホストはserver/server.jsファイル内のrenderView関数を呼び出します。関数の引数にはルートデータ/[レイアウトサービスの](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service")出力が含まれます。
-   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() メソッドを使うことができます。