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

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

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

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

ヒント

この実行フローでは、SitecoreJssStore プラグインが使用されています。このプラグインは、開発者が Sitecore コンテキストにアクセスしてデータをルーティングする際に役立ちます。

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

src/main.js ファイル内にあるアプリのメインのクライアント側エントリ ポイントから始まるクライアント側ルーティングの流れについて、次に説明します。

  • ファイル src/main.js では、サーバー側レンダリング (SSR) のデータと状態データが収集され、src/createApp.js に渡されます。

  • ファイル src/createApp.js では、Vue アプリのインスタンスが、src/router.js で定義されたアプリ ルーターとともに作成され、設定されます。レンダリングは src/AppRoot.vue に渡されます。アプリに初期状態/ルート データが提供されている場合、アプリケーションでは、ファイル src/lib/SitecoreJssStorePlugin.js にある JSS 用のカスタマイズ可能な Vue プラグインを使用して、状態を設定および管理します。

  • ファイル src/AppRoot.vue では、<router-view /> コンポーネントが、src/router.js で定義されている現在のルートに一致するコンポーネントのレンダリングを行います。

  • ファイル src/router.js では、ルーターが、アプリのルート変更に応答し、それらの変更を src/RouteHandler.vue コンポーネントに渡すように設定されています。

  • ファイル src/RouteHandler.vue では、ルートに関するレイアウト サービス データが、SitecoreJssStorePlugin によって Vue リアクティブ データ オブジェクトに提供されます。初期データが存在しない場合は、現在のルートに対してレイアウト サービス データが取得され、アプリのルートと言語状態が更新されます。その後のルート変更では、src/lib/SitecoreJssStorePlugin.js を使用して、グローバルなアプリの状態が更新されます。

  • ファイル src/RouteHandler.vue では、実際のアプリ マークアップのレンダリングが Layout.vue コンポーネントに渡されます。グローバルなアプリの状態はリアクティブ データ オブジェクトにバインドされているため、ルートに関する新しいレイアウト サービス データを受信すると、src/Layout.vue コンポーネントが再レンダリングされます。また、グローバルなアプリの状態は、src/Layout.vue の外部にあるコンポーネントがルート/コンテキスト データの変更に対応する方法を提供します。

  • ファイル src/Layout.vue では、JSS アプリのシェル HTML とグローバル要素が、そのルート プレースホルダーとともにレンダリングされます。

  • ルートの残りの構造は、ルート データによって定義されます。ルート データでは、どのコンポーネントとそのコンテンツ データが各プレースホルダーに存在するかを定義します。

サーバー側のルーティング

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

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

  • 最初の手順は、アプリケーション モードによって異なります。

    • 統合モードでのみ、Sitecore は要求を受け取り、サーバー側でルートを解析して、要求されたアイテムが JSS アプリケーションによって処理されるかどうか、およびどのバンドルを実行するかを判断します。

    • ヘッドレス モードでのみ、Node SSR プロキシは要求を受け取り、その要求を Sitecore レイアウト サービスに渡します。

  • Node ホストは、server/server.js ファイル内のサーバー バンドルから renderView 関数を呼び出します。関数の引数には、ルート データ/レイアウト サービスの出力が含まれます。

  • renderView 関数は、次の手順を実行します。

    • サーバー側のレンダリングが行われるときに使用するデータ (レイアウト サービス、ディクショナリ) を受け取ります。

    • クライアント側のレンダリングで使用される src/createApp.js ファイルを介して、アプリを作成および初期化します。

    • ファイル src/createApp.js では、SSR データが、src/lib/SitecoreJssStorePlugin.js プラグインを使用してアプリケーションの初期状態に設定されます。

    • SSR 用の Vue ツールを使用して、アプリを HTML にレンダリングします。

    • レンダリングされたアプリを index.html テンプレートに埋め込み、メタデータと SSR 状態を設定します。SSR 状態 (window.__JSS_STATE__) は、クライアントでアプリの状態をリハイドレートするために使用されます。ルートの初期データを取得するためにレイアウト サービスを呼び出す必要がなくなります。

    • 最終的な HTML でレンダリング コールバック関数を呼び出します。

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

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