Jude DeMeis

Senior Consultant, Technical Architect

A quick Headless CMS and Sitecore JSS Primer

Senior Consultant, Technical Architect

In a traditional CMS, the architecture tightly couples page design and layout to the content database. Pages are designed in an editor – and then saved to the back end. Modern demands for speed, personalization, and viewing device diversity have led to the creation of the headless CMS.

A headless CMS breaks the traditionally tight connection between the backend and front-end. Headless content is produced and edited as raw text with very little formatting or design. This text is consumed by a sophisticated display engine that can format the page to best suit the device rendering the site: desktop, tablet, or mobile.

In recent years, the concept of “Headless CMS” has taken off. While the Headless pattern increases flexibility and power, it may also add cost and time to market, since software developers are required to code rendering templates and layouts. In certain cases, this may be overkill for your business requirements and a strain on the project budget.

It is important to determine if the rendering flexibility which Headless affords is absolutely required to meet your marketing goals before making the leap. While Headless CMS’s provide great flexibility for the front-end developer, the pattern does not allow the current generation of CMS platforms to entirely manage the experience. In a traditional headless implementation, the developer would request a particular piece of content from the API and render it. This direct content request effectively sidesteps any personalization or AB testing that the marketing team might wish to achieve.

Sitecore™, one of the most advanced CMS and e-commerce platforms, has addressed this in their latest release. Enter Sitecore Omni™ and the new Sitecore JSS library. When implementing your Headless in Sitecore 9.1, you now have access to a brand new SDK called Sitecore JavaScript Services (JSS). A front-end developer can use this new API to render the whole page as created by the marketer, or select certain parts of it. Marketers can still assign personalization and testing rules to a page – and this information, including cookies and identifiers about the user are made available via the JavaScript Services API. This new SDK is a game-changer in how it will allow front-end teams to use modern JavaScript frameworks like React, Angular, and Vue.js to render fully personalized Sitecore content on any device while completely supporting the advanced marketing features of the Sitecore Experience Platform.