This investigation of Sitecore JSS and SXA was done quite a while ago, but I didn't get a chance to post it here. I need to go back to the validation of this setup so this will be a living post and I'll be updating as new findings arrive.
You might ask why would you need to mix them, but the reason is pretty simple. SXA brings a lot of functionality outside of presentation configuration (which I'm not a fan of) that can be useful for any site, like site management, wizards for site creation, local data sources, various site settings, etc.
Initial research (Sitecore 9.0.0 + JSS TP3 + SXA 1.5.x)
It is possible to run SXA and JSS side by side, which is a good starting point.
Worked:
-
Data sources work and use queries like:
-
query:$site/[@@name='Data']/[@@templatename='Accordion Folder']
-
query:$sharedSites/[@@name='Data']/[@@templatename='Accordion Folder']
-
Shared sites for data sources work fine
Didn't work:
-
SXA toolbox does not work in JSS
-
Partial and Page design do not work in JSS by default
-
Page variants don't work
-
Themes could not be used
-
Styles are applied using e.g.
-
@Html.Sxa().Component("carousel", Model.Attributes)
-
Design export doesn't work nor make sense anymore
-
The control editing event works strangely when the page design is specified
It turns out that a lot of SXA customization could not be used, site creation requires too much clean-up after creation even with all options unchecked. It was possible to use many data templates available in SXA.
To be continued...
Follow me on Twitter @true_shoorik. Would be glad to discuss the ideas above in the comments.