---
title: "サーバー側レンダリングビューバッグにデータを追加する"
slug: "add-data-to-server-side-rendering-view-bag"
abstract: "レンダリングエンジンのビューバッグパイプラインをカスタマイズして、JSSアプリケーションで追加データを取得できます"
---
# サーバー側レンダリングビューバッグにデータを追加する

統合モードでJSSアプリを実行、例えば [サーバーサイドでSitecore管理Node.jsレンダリングエンジンを使ってJSSアプリをレンダリングする場合](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/server-side-rendering-jss-apps-in-integrated-mode.html "Server-side rendering JSS apps in integrated mode")、レンダリングエンジンはJSSアプリケーションのサーバーバンドルから公開されたrenderView関数を呼び出します。

関数署名は次の通りです:

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

data引数で関数に渡される主なモデル/データは、ルートおよびコンテキストデータを含む[Sitecoreレイアウトサービスの](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service")出力です。これにより、アプリはREST呼び出しなしで初期化とレンダリングを行い、サーバー側でのレンダリングが可能になります。

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

viewBag論にさらに多くのデータを加えるには、getRenderingEngineViewBagパイプラインを拡張する必要があります。

viewBagの議論にさらにデータを加えると:

1.  Sitecoreソリューションでは、新しいプロセッサを作成します。例えば:
    
    public class AddExampleData : IGetRenderingEngineViewBagProcessor
    {
     public void Process(GetRenderingEngineViewBagArgs args)
     {
     // would be accessible in renderView as viewBag.hello
     args.ViewBag.hello = "world";
     }
    }
    
2.  SitecoregetRenderingEngineViewBagパイプラインのデフォルトプロセッサではなくカスタムプロセッサ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>
    
3.  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}\`);
    
     // ...
    }