JSSアプリにおけるルート処理とデータ取得
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecoreでは、コンテンツ作成者が各ページのURLを希望するURL構造に従って整理することで、各ページのURLを管理できます。
JSSアプリのルートは、ウェブサイトのページやSitecoreのルート項目に似ています。サンプルアプリは、アプリ実行時にルートを解決するために、ライブラリで最も人気のあるルーティングプラットフォームを使用しています。ルートは階層的に定義されており、伝統的なページツリーアーキテクチャを形成しています。アプリにこのルーティングパラダイムを強制する必要はないため、より複雑なルーティングパターンを実装することも可能です。
例えば、以下のSitecoreツリー構造のコンテンツ項目がページやルートであると仮定すると:
content site 1 Home About Products Product X Product Y Product Z site 2 Home site 3 Home
Sitecoreはこれらのページを自動的に以下のURLにマッピングします:
https://site-1-hostname/ https://site-1-hostname/about https://site-1-hostname/products https://site-1-hostname/products/product-x https://site-1-hostname/products/product-y https://site-1-hostname/products/product-y https://site-2-hostname/ https://site-3-hostname/
JSSアプリはSitecoreのURLマッピングを完全にサポートすることが期待されています。
!注サイトのホスト名やページ名をURLセグメントにマッピングする方法(ケーシング、空白置換など)のルールはXML設定で定義されています。ビジネス要件に基づいてカスタマイズするかどうかは、チームのSitecore開発者と相談してください。Sitecoreがルーティング要件を処理する際のカスタマイズには、フロントエンドとバックエンドの開発者間の協力が必要です。
カスタムルーティングを使うには、Sitecoreのバックエンドで同じカスタムルーティングを実装し、カスタムルーティングされたサイトの編集が必要になるかもしれません。可能であれば、階層的なルートを使うようにしましょう。
JSSアプリでルートを変更するには、RESTまたはGraphQLを使ってSitecoreエンドポイントに呼び出して新しいルートのデータを取得する必要があります。したがって、JSSサンプルアプリでは、データ取得や状態管理も扱うカスタムルーティング実装を定義しています。
- Next.jsアプリは ファイルシステムベースのルーターとオプションのキャッチオールルートを使用します。
- Reactサンプルアプリは/src/RouteHandler.jsファイル内にRouteHandlerコンポーネントを実装しています。詳細については、JSS Reactアプリのルーティングと状態管理をご覧ください。
- Angularサンプルアプリは changeRoute 関数を使用しています。選択したレンダリング方法に基づき、アプリは /src/app/jss-context.server-side.service.ts ファイルのサーバー側実装、または src/app/jss-context.service.tsのクライアント側実装を使用します。詳細については、 JSS Angularサンプルアプリのルーティングと状態管理をご覧ください。
- Vue.js/src/RouteHandler.vueでRouteHandlerコンポーネントを実装しています。詳細については、JSS Vue.jsサンプルアプリの「ルーティングと状態管理」をご覧ください。
- React Native /src/dataService/dataService.connected.js ファイル内にルーティングハンドラを実装しています。詳細については、「 React Native JSSアプリのルーティングと状態管理」を参照してください。
カスタムデータフェッチャーを使うか、Sitecoreレイアウトサービスを拡張する戦略のいずれかを使うことで、アプリケーションに合ったデータ取得機能をカスタマイズできます。