Sitecore Headless SXA

An exciting opportunity for future Sitecore development

In anticipation of the Sitecore JSS & Headless approach to development, I have written a short overview of my learnings from the 2017 Sitecore Symposium Conference regarding headless and SXA. A presentation which I saw explained this experimental but exciting concept.


At Sitecore Symposium 2017 in Las Vegas, Sitecore announced support for headless. This is an exciting opportunity for future website development. In its current release, Sitecore JSS will support oData layer and will allow developers to be very specific about the information they extract from Sitecore, while reducing the payload on the system to perform retrieval and submission tasks. oData JS in Sitecore is available and uses the existing libraries to accelerate the setup and configuration.

Combined SXA components with React JS.

Can it be done? Yes, in theory. It is untested in a production environment and when we have experimented with this approach it is quite tricky getting the React JS component libraries complying with the Sitecore SXA components and its pre-existing markup. To achieve this the FED would require components which have the same properties and reference as Sitecore SXA components.

JSON Data Modelling & SXA

Using JSON reading in the Layout (of experience editor), JSON lists or single items can be exposed. It is using Sitecore JavaScript Services, which are still in pre-release. Sitecore has a concept of creating variants which control the markup.

Taking this approach, you could potentially control the Sitecore fields which are output in the component markup. Using this markup you can use variants in the JSON feed. Low level controls of the property in the feed and the output is the Sitecore fields.

What is nice about the SXA is that we can get JSON output of a component really easily. SXA data gives parameters - name, placeholder, id. Then we can retrieve this in a React standard fetch passing query data.

This approach is cutting edge. Combining enterprise software with new frontend frameworks is an exciting proposition. The Sitecore JavaScript Service is still in pre-release so it will be 3-6 months before we can readily build a production site on SXA & headless. This headless approach is only available in Sitecore 9, released last week, and assumes you would use SXA 1.6, the latest version. When looking at trying this concept in practise, at this stage, it will come down to how much risk the project can absorb and how experimental you can be on your platform implementation.

— Nick Jones

Want more?

Back to the Blog