The Differences Between JSS React Developer Modes

Introduction

In our last blog, we walked through Creating Your First JSS React Application, where we touched on three modes of JSS development: Disconnected, Connected, and Integrated. In this post we will cover these three options in more detail, discussing pros, cons, and our preferred development workflow.

Disconnected Mode

Disconnected mode reads from files on disc, mocking them as Sitecore content without the need for an installed instance. The JSS site runs on your local development machine in a small web server. This can often be a starting point for development while in the prototyping phase.

Pros:

• Disconnected mode doesn't require a Sitecore install.
• It's the quickest development environment to get up and running.
• It provides the fastest development feedback loop because there is no build and deploy process.
• It's ideal for beginning stages of development, such as prototyping or content structuring.
• Any components, templates, or styles created can be used in other development modes.

Cons:

• It's the furthest from a production-ready environment.
• Because it uses mocked content, it allows room for some discrepancy between local and deployed environments.
• Any content created is strictly for prototyping, isn't easily transferable, and will require explicit maintenance on an individual page level.

Connected Mode

In connected mode, content comes from a Sitecore instance either installed locally or hosted somewhere on the web. The JSS site runs on your local development machine in a small web server, connected to the Sitecore instance.

Pros:

• Connected mode provides an environment closer to a true production environment.
• It interacts with real Sitecore content, whether a local or remote instance.
• The use of a Sitecore instance provides a better understanding of the content editor experience.
• Any components, templates, or content created can be deployed or packaged for use in other environments.
• The feedback loop for style changes or presentation value are quick.

Cons:

• It requires an installed Sitecore instance and administrative access.
• New components or template changes require a build and deploy process into Sitecore, which can add additional development time.
• Although closer than disconnected mode, it's still not a true production-ready environment.

Integrated Mode

In integrated mode, the instance of Sitecore hosts everything including the JSS site. All requests are handled by Sitecore, which serves the JSS site.

Pros:

• Integrated mode is an approved production hosting strategy.
• It uses server-side rendering of content, which offers true application experience to that of website visitors.

Cons:

• Like connected mode, it requires a Sitecore instance with admin access.
• Any change in the JSS application, whether to a component or stylesheet, needs to be built and deployed. This can make the development feedback loop slow.

What's our Preference? Connected Mode

Connected mode offers the best of both worlds. It's closer to a production-ready environment than disconnected mode, and it has a faster feedback loop than integrated mode. It gives you the opportunity to create Sitecore content alongside building components. Content changes can be promoted into other environments, or brought locally for testing and debugging. All development modes have a use-case, but connected mode is where our time is frequently best spent.