サーバー側のレンダリング ビュー バッグへのデータの追加

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

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

JSS アプリを統合モードで実行する場合、たとえば、Sitecore が管理する Node.js のレンダリング エンジンを使って JSS アプリをサーバー側でレンダリングする場合、レンダリング エンジンは JSS アプリケーションのサーバー バンドルによって公開される renderView 関数を呼び出します。

関数のシグネチャは次のとおりです。

RequestResponse
export const renderView = (callback, path, data, viewBag) => { ... }

data 引数で関数に渡されるプライマリ モデル/データは、Sitecore レイアウト サービスの出力で、ルートおよびコンテキスト データが含まれます。これにより、アプリは REST を呼び出さずに初期化とレンダリングが行え、サーバー側のレンダリングを可能にします。

サーバー側のレンダリングを行うため、アプリケーションに追加データが必要な場合は、関数の viewBag 引数に追加データを入力することができます。これには、getRenderingEngineViewBag パイプラインを使用します。ディクショナリ アイテムのサーバー側のレンダリングをサポートするため、JSS には既定で、レンダリングされたアイテムの言語が viewBag.language として含まれ、またアプリケーション用の翻訳ディクショナリが viewBag.dictionary として含まれています。

viewBag 引数にさらにデータを追加するには、getRenderingEngineViewBag パイプラインを拡張する必要があります。

viewBag 引数にさらにデータを追加するには:

  1. Sitecore ソリューションで、新しいプロセッサを作成します。以下に例を示します。

    RequestResponse
    public class AddExampleData : IGetRenderingEngineViewBagProcessor
    {
        public void Process(GetRenderingEngineViewBagArgs args)
        {
            // would be accessible in renderView as viewBag.hello
            args.ViewBag.hello = "world";
        }
    }
    
  2. Sitecore に、getRenderingEngineViewBag パイプラインの既定 プロセッサの代わりに、カスタム プロセッサの AddExampleData を使用するよう指示します。たとえば App_Config/Include/CustomViewBagPipeline.config などの設定パッチを作成し、次の設定を追加します。

    RequestResponse
    <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
      <sitecore>
        <pipelines>
          <group groupName="javaScriptServices">
            <pipelines>
              <getRenderingEngineViewBag>
                <processor type="SitecoreJss.Examples.AddExampleData, SitecoreJss.Examples" />
              </getRenderingEngineViewBag>
            </pipelines>
          </group>
        </pipelines>
      </sitecore>
    </configuration>
    
  3. JSS アプリケーションで、追加データを操作できるようになりました。以下に例を示します。

    注記

    dataviewBag の引数に含まれるデータは、JSON のシリアル化プロセスをコントロールする JSON 文字列です。

    RequestResponse
    const renderView = (callback, path, data, viewBag) => {
      data = JSON.parse(data);
      viewBag = JSON.parse(viewBag);
    
      //console output server-side will be routed to Sitecore logs
      console.log(`Hello ${viewBag.hello}`);
    
      // ...
    }
    

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

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