Sitecore 10 Headless Development Concept Understanding

As you are reading, the headless development, Sitecore Headless Development separates our the entire development process into following two parts.

  1. Sitecore instance – A Sitecore 10 instance hosting content, related templates and all other information
  2. A dedicated separate rendering host – A dedicated separate rendering host which handles client requests, get the data from Sitecore instance and show the requested pages.

Now let’s understand how Sitecore 10 Headless Development is divided and works.

Conceptual Overview: Sitecore Headless Development

The actual concept of Sitecore Headless Development is similar to JSS development where Sitecore instance works as backend and JSS front-end site acts as the site serving host, which should be developed using JSS front-end frameworks. Similarly, here with launch of Sitecore 10, we have another framework based on ASP.NET Core which works as the rendering host front-end.

Hence the decoupled logic domains makes a Sitecore solution easy to develop, maintain, scale, and upgrade.

Courtesy: doc.sitecore.com

Setup as a headless system, the backend and the front end both are separate infrastructures that communicate with each other via endpoints.

The rendering host / front-end contains your website code and the static resources, while the back end contains the content items.

The headless systems deliver web pages to visitors differently than the coupled systems where the back end and the front end are combined, like a web sites developed with Sitecore 8.x / 9.x (Without JSS) with server side renderings.

So, in the following way the Sitecore Headless Development works:

  • The rendering host translates a visitor request to a content item in the Sitecore instance.
  • The Sitecore instance returns the content item and the associated presentation details, and so on, to the rendering host.
  • The rendering host renders the content item for the visitor.

The Rendering Host

The rendering host front end is a web application developed using the Sitecore ASP.NET Rendering SDK and your code and static resources. The main job of the rendering host is to respond to visitor requests.

Courtesy: doc.sitecore.com

The rendering host developed using Sitecore ASP.NET Rendering SDK functions in the following way:

  • The visitor sends a request to the web server, which activates the rendering host web app.
  • The Layout Service Client fetches the relevant content and presentation data (the data model) from the Sitecore Headless Services.
  • The Layout Service Client passes the data model to the Rendering Engine.
  • The Sitecore Rendering Engine renders the data model and your code and static resources into the final response and returns it to the visitor.

The Sitecore instance

The Sitecore instance exposes a set of endpoints available to front ends such as:

  • Web-based or native rendering hosts
  • Integrations to 3rd party system

Sitecore ASP.NET Rendering SDK

The Sitecore ASP.NET Rendering SDK offers a starting point for rendering of Sitecore content.

The very first member is Sitecore Layout Service which is a Sitecore Headless Services endpoint that provides JSON formatted content from Sitecore. The Sitecore Layout Service is not new but know since launch of Sitecore JSS and backbone of the headless Sitecore.

The Sitecore Layout Service is consumed by the Sitecore Layout Service Client, and you use the Sitecore Rendering Engine to render the content for the end users.

The second member Sitecore Headless Services (formerly known as JSS Server Components) provides the APIs needed for the Sitecore ASP.NET Rendering SDK.

You can install the Sitecore Headless Services in the following ways:

  • In an on-premise Sitecore installation as a Sitecore package
  • In a cloud Sitecore installation as a Web Deploy Package using the Sitecore Azure Toolkit
  • In a Sitecore container using Dockerfiles

In the next article we will learn how to setup the application using Sitecore ASP.NET Rendering SDK.