サーバーサイドではSitecore Experience Edgeエンドポイントを使ってJSSアプリをヘッドレスでレンダリングします

Sitecore Experience Edge(GraphQL)エンドポイントを使ってJSSで構築したReact、Angular、またはVue.jsアプリケーションをサーバーサイドでレンダリング(SSR)したい場合、Sitecoreはセットアッププロセスを簡素化する サンプルアプリケーション を提供しています。

Edgeエンドポイントを用いたSSRのサンプルアプリケーションnode-headless-ssr-experience-edgeには、Node.jsとExpressサーバー、エンドポイントのクエリサービスが事前に設定されています。

!注Node.jsとExpressは、ヘッドレスモードの特定のユースケースシナリオに応じて設定しなければならないサードパーティ技術です。

アプリケーションはJSS GraphQLサービス を使ってJSSアプリケーション、レイアウト、辞書データをプロキシせずにレンダリングします。

!重要Sitecore Experience Edgeエンドポイントを用いたSSRのサンプルは 実験的であり 、Sitecoreによって公式にサポートされていません。

この技術を使うには、以下の条件が必要です:

• ヘッドレスサービスがインストールされたSitecoreインスタンスです。
• Sitecore API鍵だ。
• React、Vue.js、またはAngularアプリケーションで構築されたJSS:

  • 統合モードでサーバー側レンダリングをサポートしています。

  • Experience Edge GraphQLスキーマをサポートしています。

    !重要JSSアプリケーションは、Next.jsベースのものを除き、レガシー/非EdgeのGraphQLスキーマを使用しています。GraphQLのコンポーネントやクエリはExperience Edgeスキーマと互換性のあるものに更新する必要があります。

  • SITECORE_API_KEYを提供します。GraphQLRequestClientはAPIキーを使ってSitecore XM EdgeスキーマとSitecore Experience Edgeの両方で認証用のsc_apikeyヘッダーを設定します。

サンプルnode-headless-ssr-experience-edgeを使ってJSS React、Angular、またはVue.jsアプリをヘッドレスでSSRするには:

1. ターミナルで、node-headless-ssr-experience-edgeサンプルに基づいてアプリケーション名を付けるためのJSSコマンドを実行してください。例えばjss-edge

   jss create jss-edge node-headless-ssr-experience-edge

2. 別のターミナル、SSRしたいJSSアプリのルートディレクトリで、次のスクリプトを実行して本番用JSSアプリを構築します。

   jss build

3. 例えば、distやbuildなどのディレクトリを、SSRアプリのルートディレクトリにコピーします。 jss-edge、例えばdist// ディレクトリ内のディレクトリです。

   あるいは、JSSアプリのscjssconfig.jsonファイルでinstancePathをSSRサンプルルートに変更してください。ターミナルでjss deploy filesコマンドを実行して、ビルド結果をSSRアプリにデプロイします。

   !重要scjssconfig.jsonファイルは、JSSアプリをSitecoreに接続していなければ存在しないかもしれません。

4. SSR jss-edgeアプリでconfig.jsファイルを検査し、以下のプロパティの値を指定するために(または環境変数を使う)ことができます。

   • appName- config.appName構成のpackage.jsonファイルに設定されたJSSアプリケーションの価値。
   • bundlePath - ビルドプロセスの結果としてディレクトリをコピーした経路 server.bundle.js。例えば: './dist//server.bundle'。
   • endpoint - Sitecore Experience Edge終点。
   • apiKey - Sitecore Experience EdgeでプロビジョニングされたAPIキーに設定。
   • defaultLanguage - リクエストURLに言語が指定されていない場合、言語コンテキストを判別するためにJSSアプリで設定したデフォルトの言語に設定します。
   • port - SSRサンプルの開始用。

5. 端末のSSR jss-edgeアプリのルート上で、SSRアプリケーションをテストするために以下のスクリプトを実行します。

   npm run start