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

JSS Vue.jsサンプルアプリにおけるルーティングと状態管理

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

このページの翻訳は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にあるカスタマイズ可能なVueプラグインを使って状態を設定し管理JSS 。
  • ファイル src/AppRoot.vueでは、 コンポーネントが現在のルートに合わせてコンポーネントをレンダリングする責任を負っています。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レイアウトサービスに渡します。
  • ノードホストはserver/server.jsファイルにあるサーバーバンドルからrenderView関数を呼び出します。関数の引数にはルートデータ/レイアウトサービスの出力が含まれます。
  • renderView関数は以下の手順を実行します。
    • サーバー側レンダリング(レイアウトサービス、辞書)で使用するためのデータを受け取ります。
    • クライアント側レンダリングで使用される src/createApp.js ファイルを通じてアプリを作成し、初期化します。
    • ファイル src/createApp.jsでは、SSRデータが src/lib/SitecoreJssStorePlugin.js プラグインを使ってアプリケーションの初期状態に設定されます。
    • Vueツールを使ってアプリをHTMLにレンダリングします。
    • レンダリングされたアプリをindex.htmlテンプレートに埋め込み、メタデータとSSR状態を設定します。SSR状態(window.__JSS_STATE__)はクライアント上でアプリの状態を再ハイドレートするために使われ、初期ルートデータをLayout Serviceに呼び出す必要がなくなります。
    • 最終的なHTMLでレンダリングコールバック関数を呼び出します。
この記事を改善するための提案がある場合は、 お知らせください!