統合モードでのサーバーサイドレンダリングJSSアプリ

サーバー側レンダリングビューバッグにデータを追加する

Version:

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

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

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

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

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

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

アプリケーションでサーバー側レンダリングの追加データが必要な場合は、getRenderingEngineViewBagパイプラインを使用して、関数のviewBag引数に追加データを入力できます。デフォルトでは、JSSには、レンダリングされたアイテムの言語がviewBag.languageとして含まれ、アプリケーションの翻訳辞書がviewBag.dictionaryとして含まれ、ディクショナリアイテムのサーバー側レンダリングが容易になります。

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

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

Sitecoreソリューションで、新しいプロセッサを作成します。例えば：

public class AddExampleData : IGetRenderingEngineViewBagProcessor
{
    public void Process(GetRenderingEngineViewBagArgs args)
    {
        // would be accessible in renderView as viewBag.hello
        args.ViewBag.hello = "world";
    }
}

Sitecoreに、getRenderingEngineViewBagパイプラインのデフォルトプロセッサではなく、カスタムプロセッサAddExampleDataを使用するように指示します。設定パッチ (App_Config/Include/CustomViewBagPipeline.configなど) を作成し、次の設定を追加します。

<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>

JSSアプリケーションで、追加データを操作できるようになりました。例えば：

メモ

引数dataとviewBagに含まれるデータは、JSONシリアル化プロセスを制御するためのJSON文字列です。

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}`);

  // ...
}

この記事を改善するための提案がある場合は、お知らせください!

サーバー側レンダリング ビュー バッグにデータを追加する

サーバー側レンダリングビューバッグにデータを追加する