In anticipation of the Sitecore JSS & Headless approach to development, I have written a short overview of my learnings from the 2017 Sitecore Symposium Conference regarding headless and SXA. A presentation which I saw explained this experimental but exciting concept.
At Sitecore Symposium 2017 in Las Vegas, Sitecore announced support for headless. This is an exciting opportunity for future website development. In its current release, Sitecore JSS will support oData layer and will allow developers to be very specific about the information they extract from Sitecore, while reducing the payload on the system to perform retrieval and submission tasks. oData JS in Sitecore is available and uses the existing libraries to accelerate the setup and configuration.
Can it be done? Yes, in theory. It is untested in a production environment and when we have experimented with this approach it is quite tricky getting the React JS component libraries complying with the Sitecore SXA components and its pre-existing markup. To achieve this the FED would require components which have the same properties and reference as Sitecore SXA components.
Taking this approach, you could potentially control the Sitecore fields which are output in the component markup. Using this markup you can use variants in the JSON feed. Low level controls of the property in the feed and the output is the Sitecore fields.
What is nice about the SXA is that we can get JSON output of a component really easily. SXA data gives parameters - name, placeholder, id. Then we can retrieve this in a React standard fetch passing query data.