Server-side rendering JSS apps in integrated mode

Current version: 19.x

When running the JSS app in integrated mode, a Node.js server renders the JSS application before providing it to the client. The Node.js server acts as a rendering engine that runs on the Sitecore server and provides rendering services for your JSS application.

For SSR to work in integrated mode, the JSS application must export a renderView function and configure how webpack exposes the library.

The renderView function

The Node.js rendering engine expects your app to export a global function named renderView with the following signature:

RequestResponse
renderView(callback, routePath, data, viewBag) {}

When serving a route, the rendering engine invokes the renderView function.

For an example of how to declare this function in your code, see the server/server.js file in JSS React and Vue.js sample apps or the server.bundle.ts file in JSS Angular sample apps.

Webpack library target type

The server bundle of the JSS app must provide an entry point for server-side rendering of the application. To this end, the webpack bundle must configure the output.libraryTarget to 'this'. This setting exposes the server bundle of the JSS app as an object and allows the rendering engine to invoke the renderView function exported by the server bundle. For example:

RequestResponse
{
  output: {
    libraryTarget: 'this' //required for use with JSS rendering engine
  }
}

Do you have some feedback for us?

If you have suggestions for improving this article,