---
title: "Add data to server-side rendering view bag"
slug: "add-data-to-server-side-rendering-view-bag"
abstract: "Customize the rendering engine view bag pipeline to get additional data in the JSS application"
---
# Add data to server-side rendering view bag

When running a JSS app in integrated mode, such as when [server-side rendering the JSS app using the Sitecore-managed Node.js rendering engine](https://doc.sitecore.com/xp/en/developers/hd/19/sitecore-headless-development/server-side-rendering-jss-apps-in-integrated-mode.html "Server-side rendering JSS apps in integrated mode"), the rendering engine invokes a `renderView` function exposed by the server bundle of the JSS application.

The function signature is:

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

```

The primary model/data passed into the function in the `data` argument is the output of the [Sitecore Layout Service](https://doc.sitecore.com/xp/en/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service"), containing route and context data. This allows the app to initialize and render without a REST call, allowing for server-side rendering.

If your application requires additional data for server-side rendering, you can populate the `viewBag` argument of the function with additional data with the help of the `getRenderingEngineViewBag` pipeline. By default, JSS includes the language of the rendered item as `viewBag.language` and the translation dictionary for the application as `viewBag.dictionary` to facilitate the server-side rendering of dictionary items.

To add more data to the `viewBag` argument, you must extend the `getRenderingEngineViewBag` pipeline.

To add more data to the `viewBag` argument:

1. In your Sitecore solution, create a new processor. For example:

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

2. Instruct Sitecore to use the custom processor `AddExampleData` instead of the default processor for the `getRenderingEngineViewBag` pipeline. Create a configuration patch, for example `App_Config/Include/CustomViewBagPipeline.config` and add the following configuration:

    ```xml
    <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. In your JSS application, you can now operate on your additional data. For example:

    > [!note]
    > The data contained in the arguments `data` and `viewBag` is a JSON string to control the JSON serialization process.

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

      // ...
    }
    ```