What is the difference between Sitecore SXA and Sitecore JSS

There has been many questions during the Sitecore Symposium and it seem that people are confused and do not know the difference Sitecore SXA and Sitecore JSS.

So I will try to explain the difference between the two and when would you use either one of those.

First let’s try to define the two:

Sitecore SXA

The Sitecore® Experience Accelerator provides reusable, templated UX layouts and components to help you get up and running quickly.

Sitecore JSS

Sitecore JavaScript Services (JSS) is a complete SDK for JavaScript developers that enables you to build full-fledged solutions using Sitecore and modern JavaScript UI libraries and frameworks.

So Sitecore JSS is an SDK and Sitecore SXA is set of prebuilt components, templates and layouts.

Sitecore SXA will help you easily change page components using drag-and-drop functionality. Reuse pre-built components, templates, and layouts. Help your content teams create, edit, and deploy web content across channels in less time using fewer resources with the intuitive tools included.

Sitecore JSS will give you freedom to build headless sitecore applications, and continue using the Experience Editor and will let you use all of the Marketing Tools that Sitecore Experience Platform has to offer.

How each one of those is render?

Sitecore JSS works with using JavaScript (Node.js)

Sitecore SXA is working with MVC Renderings

So when you should utilize either one of those?

Since I am a big fan of Sitecore JSS I will recommend you to start with Sitecore JSS, and here is why:

  • Sitecore JSS is a completed SDK for JavaScript Developers
  • You can start your development without having Sitecore installed, which means your developers will not tell you that they are busy by installing Sitecore instance, they will start working on the application, which is referred to as Code-first Workflow
  • You would like to run your front end app on Linux, to save some cost
  • You want to decouple, and you want your Marketing Team to keep Sitecore Marketing Tools such as, A/B Testing, Analytics, Personalization etc.
  • You are looking for create a headless application
    • You want to build a PWA
    • You want to build an app for wearable device, IOT device, Kiosk and you want to manage it all from one place, and personalize all your Omni Channels.
    • You can choose between React, Angular, VUE, React Native and Svelte (not officially supported by Sitecore)

If you believe that none of this is any of the interest to you, then here is why you should use SXA:

  • Sitecore SXA is a component that needs to be installed on top of Sitecore
  • Toolbox – You have prebuilt components and layouts that you can reuse

So by now I hope you understand the different between the two, they are not competing against each other, because they are completely different ways of constructing websites.

One of them allows you to use Toolbox with prebuilt components, the other ones allows you to build a front end application that runs on NodeJS.

photo used: https://unsplash.com/@bdchu614

Sitecore SXA and JSS Datasource Location Fix

So many of you know that until 9.2 with JSS 12, there were some conflicts between SXA and JSS on the same environment, to be more specific they were not compatible.

So if you are using Sitecore 9.0.2 and JSS 11 and SXA 1.8 on the same environment, and you have created a Sitecore JSS site and then you had installed SXA on top of it. And now your content authors have to do extra work in order to add components to the page in the Experience Editor, they get extra steps now.

So your renderings are set up correctly (https://helix.sitecore.net/principles/layout/datasource-settings.html)

When you try to add component to a page, you select a component

and then you get prompted to create a component and give it name

But when you click to create it again pop-ups with a window to select a component and give it a name

Usually when you install something it should not break, but in my case a new pipeline was added.

Here is the compiled list of all the pipelines, that I see in the showConfig.aspx

ScriptedRenderingDataSourceRoots - [Cognifide.PowerShell]
GetDatasourceLocation - [Sitecore.XA.Foundation.LocalDatasources]
AddAdditionalTemplates - [Sitecore.XA.Foundation.LocalDatasources]
AddDatasourceLocations - [Sitecore.XA.Foundation.LocalDatasources]
RestrictFallbackDatasourceLocations - [Sitecore.XA.Foundation.Multisite]
SetFallbackDatasourceLocations - [Sitecore.Kernel]
GetDatasourceTemplate - [Sitecore.Kernel]
GetTemplatesForSelection - [Sitecore.Kernel]
CheckDialogState - [Sitecore.Kernel]
AddPageDataFolder - [Sitecore.XA.Foundation.LocalDatasources]
AddCompositePageDataFolder - [Sitecore.XA.Feature.Composites]
AddCompositePageDataFolder - [Sitecore.XA.Foundation.LocalDatasources]
GetDatasourceTemplate - [Sitecore.XA.Foundation.LocalDatasources]
ExtendGetDatasourceDialogUrl - [Sitecore.XA.Foundation.LocalDatasources]

The one that creates me the problem is this one “GetDatasourceTemplate

For the quick fix all you need to do is remove or disable the following file (SelectRenderingDatasource.xml) – location below

Before you delete anything important note this approach is not recommended as far as you want to use the SXA module itself. It will break SXA functionality.

After you install the SXA module, it overrides the logic for SelectRenderingDatasource in Website\sitecore\shell\override\Applications\Dialogs\SelectRenderingDatasource\SelectRenderingDatasource.xml (calling all other related logic). 

This will let you add the component to the page and then it will prompt you to give it a name