React SDK - SSR compatibility in channel manager

Hi guys,

I was playing with the server side rendering example of the React sdk at

https://github.com/bloomreach/experience-react-sdk/tree/master/examples/server-side-rendered

Using a clean archetype v13 with some essentials components installed, it seems to work pretty well. But in the channel manager’s preview mode, it appears the HTML comments needed for channel manager integration are missing.

I believe that the CmsPage component that is imported from the SDK is supposed to handle interaction by accepting a cms object in it’s window.SPA#init function, but the containers and components aren’t interactive.

Was the implementation of drag/drop components supposed to be working in this SDK example?

One interesting behavior I’ve noticed is that when you switch to the channel manager on it’s initial port (so you can see the normal jsp/ftl template-rendered preview), the drag/drop components are highlighted as usual. Then, switching back to the cms on the port of the reverse proxy to see the react-rendered preview, the interface remains functioning for the react-rendered page until logout.

On closer inspection it appears I was trying to use the SDK with a v13 archetype, whereas the implementation was assuming the v12 from the demo spa project at https://github.com/onehippo/hippo-demo-spa-integration would be used.

It would be nice to see a functioning v13.

Hello Mitchell,

please also keep in mind that the channel manager integration with the SDK is an enterprise feature.
So if your v13 archetype is a developer edition it is expected that the full channel manager functionality is missing.

Kind regards,
Lef

Hi Lef,

Thank you for the feedback. I have indeed built an enterprise v13 archetype. As outlined above, channel manager interaction appears to work when loading the template rendered by the CMS, but when redirecting the preview in the channel manager to an externally hosted SPA (as described in the SDK), it doesn’t seem to work.

The window.SPA init function does get called, and the overlay does get rendered, showing that the cms object is passed to the window.SPA and that the render method is called, but beyond that, interactiveness doesn’t work.

It does work for the v12 SPA demo project prepared by bloomreach, so I suspect that the solution is in understanding the relevant difference between that an a v13 archetype.

Adding a screenshot to show the React SDK output with the debugging param enabled. Using a v13 archetype. As you can see, the cms object that is passed to window.SPA has its methods called correctly, but they don’t create the desired result.

Update: It turns out that this is a known issue that is being worked on. Will be communicating with Bloomreach about a work around until it is fixed in version 13, or perhaps using a different version.