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. 

 

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.