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.
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
renderViewgives 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.
- Download the compiled
server.bundle.jsfile from here: https://github.com/erzr/jss-generic-ssr/blob/master/build/server.bundle.js
- Navigate to your Sitecore instance
Websitedirectory. If you already have other JSS applications installed here, you'll have a
distdirectory 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.
server.bundle.jsinto 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.
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.