Recently, there have been conversations about Sitecore SXA and Sitecore JSS (Headless) and the kind of development approach we should choose while creating a project. Before getting to a conclusion, it is important to understand these two and also what they are actually capable of individually and together.

SXA

The Sitecore® Experience Accelerator provides reusable, templated UX layouts and components to help you get up and running quickly
For content authors, SXA provides an OOTB set of components which comes with a drag-drop interface to create wireframes, themes and creative exchange (for front-end styling)
Having multisite and multitenant feasibility and sharing content within other sites is easy

SEA

JSS (Headless)

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
No Such Drag Drop interface comes with the JSS and it works with Code-First-Workflow
Don't have multisite or multitenant capability

SJS

Let's begin the showdown!!

Clash 1 – Flexibility

SXA Rendering Variants - Rendering Variants have the ability to adapt the design provided by the developers and designers. We can create multiple rendering variant for one Component. For the ease of editing, Sitecore provides a visual representation to select/change the rendering variant by selecting the rendering variant Item and in the thumbnail field add the image you want to show while editing in Experience Editor Mode.

Blog 2 Images

JSS OOTB Functionalities - Unfortunately with JSS there is nothing like the rendering variants as the SXA has, but with the OOTB components we have a bunch of functionality that's inherited from the front-end frameworks that can't be left undone. This comes with Component Composition which means we can pull additional components into one component.

Here we have pulled the HContainer in the index.js file.

So as it seems by default JSS doesn’t comes with flexibility to control the variance of the rendering but we can use the JS and CSS styles to build a custom one.

Clash 2 – Grid Framework

SXA Styleguide - To add CSS classes on a component SXA provides a way to add the classes on the component level. We can create and apply our custom classes on the component and can play with them in the Experience Editor Mode.

Also SXA provides the Grid Framework, if we go to the Edit properties of the component we can set the column width for each device and all of that without a single line of code.

JSS Styleguide – JSS doesn't provide any automation like SXA but it provides a very rich set of JSS starters which can't be overlooked. With infinite flexibility, a bunch of customization are available to JSS that differentiated from the need of front-end framework applications.

Each Styleguide template comes with a sample styleguide showing how to use and define various Sitecore field types and patterns in that framework.

React - The React Styleguide template, based on create-react-app.
Vue - The Vue Styleguide template, based on vue-cli.
Angular - The Angular Styleguide template.

Clash 3 – Components Scaffolding and Multisite

SXA - SXA comes with a very rich set of OOTB components that can be attached on the page using drag-drop mechanism and we can also scaffold the existing components to out custom ones or can create a custom component from scratch.

SXA also comes with the snippets and Page/Partial designs to collect the components and attach on the pages as required.

Also SXA provides head start for the developers as it gives the base site and tenant in advance and have the tendency to further add new site/tenant without code.

$image 7\$

JSS - On the other hand JSS doesn't comes with the flexibility to have Multisite/Multitenant functionality. Also we can't scaffold any JSS components. In order to create multiple sites, we have to create multiple JSS apps for that, and also to share code and components among them. Customizations are required to reference the components from one Site to another using -

Monorepo
Monotree

Conclusion

So the real question is which one is best to use? And the answer to that would be quite simple - it all depends on you. We can use them individually, and also together also. If JSS is not fully implemented within SXA, and if both are used together, there can`t be any drag-drop mechanism.

A great video by Mark van Aalst & Anastasiya Flynn in which they both fight for each of their area of domain.

It’s not a question of either this/that, moreover it’s a question of when.