Documentation

Read and search through all the Sitecore JSS documentation

JSS application modes

Note: Before learning about application modes, make sure to select a developer workflow. Some application modes only apply to specific developer workflows.

JSS allows you run your JS app in various modes or configurations giving you a lot of flexibility depending on where you are in the development process:

For development:

  • Disconnected dev mode - Sitecore not required, hosts locally, uses local content data.
  • Connected dev mode - Sitecore required, hosts locally, content data from Sitecore.
  • Integrated mode - Sitecore required, hosts on Sitecore, content data from Sitecore, server-side rendering.
  • API-only mode - Consume personalized Sitecore layout data from any platform that understands JSON.

For production:

Disconnected developer mode

With disconnected mode, content data is mocked using local files (json/yaml/js) instead of a Sitecore instance. Disconnected mode is advantageous when there is no available Sitecore instance to deploy the app to, where most developer expertise is in JavaScript, or when it is undesirable to have frontend developers need their own Sitecore instance such as using Macs without a virtual machine to host Sitecore. All of the sample applications can run in disconnected mode.

disconnected mode diagram

Disconnected mode apps can import themselves to Sitecore, creating all necessary Sitecore items for them to run in connected mode later.

A common development path might be for an application's lifecycle to begin in disconnected mode, and later in development transition to connected mode if the limitations of disconnected import need to be circumvented.

Characteristics

  • Rendering performed by the browser
  • Data comes from local json/yaml files
  • Usages: development

Configuration

  • Run jss start to start in disconnected mode.
  • http://localhost:3000 (if it doesn't automatically open)

Connected developer mode

In connected mode, a Sitecore instance is required. The Sitecore databases hold the content, layout data, and component registrations. Unlike disconnected mode defining local mock data is unnecessary. When the app is run, the data is acquired from Sitecore using HTTP data calls.

connected mode diagram

Characteristics

  • Rendering performed by the browser
  • Data comes from Sitecore via LayoutService/DictionaryService/GraphQL APIs via HTTP.
  • Usages: development against running Sitecore instance

How to use

  • Follow the directions in the Quick Start to deploy the app to Sitecore, (including prerequisites if it's the first JSS app on this Sitecore instance).
  • Run jss start:connected to start the dev server.
  • http://localhost:3000 (if it doesn't automatically open)

Note: When signed in to Sitecore in Experience Editor mode, using connected mode may result in extra code-like markup being delivered to your JSS application. If this happens, switch your site to Preview or Normal mode in Sitecore and the extra markup will go away.

Integrated mode

This mode hosts your JSS app within a Sitecore instance. The application is server-side rendered (SSR) by the Sitecore instance, meaning complete HTML is delivered to the user without any initial JS execution on the client. Integrated mode is always used when editing the site in Sitecore Experience Editor.

We recommend Headless mode (below) for high traffic production sites. It provides additional scaling options, better scalability, and lower hosting costs for heavy traffic. If using SSR with Connected GraphQL, this is particularly important. Always load test your site with expected traffic before going live.

This mode allows your Sitecore users to manage content, presentation and other marketing features for your JSS app using Sitecore's Experience Editor.

integrated mode diagram

Characteristics

  • Rendering performed by server (SSR by Node instances orchestrated by Sitecore)
  • Data comes from Sitecore LayoutService, passed from Sitecore to Node with no extra HTTP call
  • Requires configuration of the application with Sitecore
  • Usage: Content Management/Authoring server, production Content Delivery server (if not using headless hosting)

How to use

  • Follow the directions in the Quick Start to deploy the app to Sitecore, (including prerequisites if it's the first JSS app on this Sitecore instance).
  • http://your-configured-app-hostname (from /sitecore/config/*.config, search on hostName)

Headless server-side rendering mode

This mode allows for running your app on any platform that supports node.js and and Express, opening up inexpensive rendering engine scaling.

Characteristics

  • Rendering performed by server (SSR by Node-as-a-service provider, i.e. Azure App Service, Netlify, Heroku, etc)
  • Data comes from Sitecore CD server via LayoutService API (HTTP calls)
  • Full Sitecore marketing/personalization engine support
  • Usages: decoupling rendering of the JSS app from Sitecore, multichannel API usage

headless mode diagram

How to use

Consult the headless with sitecore-jss-proxy page for details on how to configure the headless proxy.

API-Only Mode

In this mode, you consume data directly from Sitecore's headless APIs - Layout Service, GraphQL, Dictionary Service, Sitecore Services Client, etc.

API-only mode can be used with any platform that understands JSON data to consume Sitecore-provided content and personalized layout information. When the data is used this way, none of the JSS npm packages (or indeed any JavaScript) is required. Experience editor will not be supported.

Note: a JSS-enabled Sitecore license is required to consume JSS' Layout Service data directly as an API.

Characteristics

  • Consume Sitecore APIs that return JSON data from anything that understands JSON, e.g. native mobile apps, chatbots, etc.

How to use (Layout Service, Dictionary Service)

  • Follow the directions in the Quick Start to install the JSS server components.
  • Create a JSS app configuration (see /sitecore/config in any of the sample apps for a starting point) and deploy it to Sitecore's /App_Config/Include
  • Run a test Layout Service request to the app: http://myapp.dev.local/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY}

How to use (GraphQL)

How to use (SSC)

SSC is built in to Sitecore and requires no additional installations. Consult the SSC documentation for usage guidelines.