Start a JSS app in integrated mode

Abstract

Manage content and presentation with Sitecore editors when server-side rendering the JSS app.

To server-side render your JSS application and integrate applications with advanced Sitecore editors, you must run the application in integrated mode.

This mode allows your Sitecore users to manage content, presentation, and other marketing features for your JSS app using Sitecore advanced editors, such as Experience Editor or Horizon.

Important

Next.js JSS applications do not use integrated mode for integrating with Sitecore editors. Instead they use the Preview feature of Next.js in combination with the HTTP Rendering Engine. The Next.js application serves as the rendering host.

Integrated mode hosts your JSS app within a Sitecore instance. The application is server-side rendered (SSR) by a Node.js instance hosted and orchestrated by Sitecore or by a remote rendering host leveraging the HTTP rendering engine. Complete HTML is delivered to the user without any initial JavaScript execution on the client. Data comes from Sitecore Layout Service, passed from Sitecore to Node with no extra HTTP call.

The following diagram illustrates the request flow in integrated mode.

HTTP requests in integrated mode

To run the application in integrated mode:

  1. Follow the steps to connect and deploy your application to Sitecore.

  2. Open the application in the browser using the application's configured hostname by navigating to http://<your-configured-app-hostname>.

    Tip

    In an application built with the jss create command based on official application samples, you can find the hostname in the application's configuration files located at /sitecore/config/<YOUR_APP_NAME>.config.

Integrated mode in production environments

You run the JSS application in integrated mode in production environments only on Content Management servers, to enable advanced editor integration.

For high-traffic production sites, we recommend headless server-side rendering mode because it provides additional scaling options, better scalability, and lower hosting costs for heavy traffic. If you are rendering the application server-side when using connected GraphQL in JSS apps, this is particularly important.