ReactJS and SXA with Sitecore-Headless (Sitecore-first)

  

 

Now a days organizations using headless CMS instead of traditional CMS. Headless CMS comes with the benefit of utilizing it with various devices. We can build react apps with custom code as well.

 Sitecore provide Sitecore headless services and headless client SDK for development of full-fledged application using JavaScript libraries and framework.

 While working on a project I came across a requirement from client to use react components along with the SXA out of the box components. We are using the SSR to render headless custom components along with the SXA.

"Headless is the future of Sitecore!"

 When people think about Headless. Few thoughts come in will headless replace the MVC development? No.

 MVC will still be there in center of sitecore ecosystem. Headless just provide more flexibility for front end developers to work without having sitecore in their local system.

 

What are the benefits of using?

 Using SSR in Sitecore gives front end developers to work independently and without the dependency on Sitecore developers.

SSR will render the components on the server to provide output as an HTML. The web app will deliver the HTML to user with out any JS execution on the client. This allows Sitecore editors to manage content and presentation via Content Editor, rendering is done on Sitecore server and data can be provided by Layout service, third party API’s or Graph QL.

 

 

Why Sitecore-first approach?

 Sitecore-first is much closer to me being a Sitecore developer, I am defining layouts, placeholders and renderings. Headless present HTML via third party API’s rather than using MVC presentation.

Using SSR we can get the benefit and flexibility of using headless along with the SXA. SXA comes with lot of out of the box inbuild component and can really enable the fast development on the other hand headless can bring the flexibility of rich UI based components.

 

Headless Implementation

 We create headless react app and the structure of the application is like as shown below.

  

The component folder contains all the react components that we are going to use on the Sitecore Renderings, JSS developer use AXIOS library to fetch the data via third party APIS which fetches the data from Sitecore.

 Front end developers use ServerHtml to view the components created on their local system.On server.html they use div with data properties like shown below, the property data-viewcomponent use to glue the code of the component.

  

 

When react app is build it will create dist folder which will contain the <app name>.client.bundle.js ,client.bundle.js and client jss.

Using octopus it will be deployed to Sitecore root folder.

 On Sitecore we will create MVC rendering like shown below  and to consume that rendering on the sxa we need to add that rendering to available renderings like if we want to add that tendering to Page structure we can go and edit and add new created rendering. Once we do that the rendering will be available for content editors to add to Page layout.