Server-side rendering JSS apps in integrated mode
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:
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:
{
output: {
libraryTarget: 'this' //required for use with JSS rendering engine
}
}