I've been wanting to tackle this one for a little while now. I had been thinking about creating a generic Server Side Rendering (SSR) library for Sitecore JSS ever since I implemented SSR while doing my Svelte integration for Sitecore JSS.

And now it exists here.

I built this library on top of jss-svelte. When compiled there are no external dependencies and you can view the compiled version of the project here. The library knows absolutely nothing about the markup of your components so only things really shown are placeholders and every field that belongs to the data source item on components applied to the route you are editing.

Sample Application Generic Component

With that being said though, things are pretty functional. You can edit most fields in line when it's supported by the field. Otherwise, you can use the Experience button on the component itself to edit the fields in the modal.

I wrote some about the reasoning behind this library in the GitHub README but here's a summary of why I decided to write this:

  • There's no out of the box Experience Editor functionality for the React Native sample app. This means that managing your layout data is probably a pretty manual process. See below for instructions on how to use this React Native.
  • Server Side Rendering took me a while when I wrote my Svelte Sitecore JSS integration. There are lots of small things that are framework specific that you need to take into consideration. Whether it's Connected GraphQL queries or adding conditionals throughout your code to account for the data that renderView gives you. It all just takes time. If you intend on being truly headless and not relying server side rendering, you might consider using this as a stop gap.
  • There might be other use cases. I hadn't even thought of the React Native until I was chatting with Corey Smith about this idea. I'd love to hear about other potential use cases for something like this.

Using this with React Native

In the sample app, there's nothing that will copy over the server.bundle.js file in React Native, because nothing like that exists like that in this sample. The easiest way to get started is just manually copying over the server.bundle.js with the following steps.

Hello from React Native!
  • Download the compiled server.bundle.js file from here: https://github.com/erzr/jss-generic-ssr/blob/master/build/server.bundle.js
  • Navigate to your Sitecore instance Website directory. If you already have other JSS applications installed here, you'll have a dist directory already. Navigate into it.
  • Create a folder that is the same name as your JSS application, the sample application is named JssReactNative. If you're unsure what the name of your application is, try to use Experience Editor on one of your React Native routes and it will provide the path in the error message.
  • Copy server.bundle.js into the newly created directory.
  • Open Experience Editor on one of your React Native routes, enjoy!

This should probably be done in a more automated way but manually adding it seems like the best way to get started using it for now.

Conclusion

This library can be used with any JSS application but you should stick to the official SSR functionality whenever possible. This library was really intended to be a starting place and it might not fit your needs. I'd love to talk to you if you were thinking about using this project though. Feel free to reach out through my site here or on Twitter.