Building React on an Umbraco backend
At POSSIBLE we wanted to build a React Frontend on an Umbraco Backend using Server Side Rendering. After investigating the technical approach, we realised the official implementation of Umbraco is in progress, so we had to look for an experimental one.
Then we found a working prototype on Github, which we could use as a source for our project.
The benefits of this technology stack
- Development processes don’t have to be synchronised
- Frontend developers don’t need to deal with a local Umbraco setup
- Dramatically reduces Frontend-Backend integration time
- No CMS knowledge is required by the Frontend Developers
- Better user experience
After playing around with the Github prototype, we were confident enough to start developing the real project.
Our approach was to create each module of the website, and build the pages using a data structure which describes the order of these modules.
During the implementation of the modules, we took care to maintain a strict documentation of the main purpose, outlook and properties of each module. This documentation was really important, and we used it as one of the main sources of the Backend API layer development.
To reach our goal, we had to find the best data structure, which would also be flexible enough for our use-cases.
Data structure
Once the modules and the documentation were in place, we had to find an optimal data structure. Since the Frontend layer has no hardcoded pages, this is a key point of our application, so we had to create a really robust solution.
An example from the application
{
"meta": {
"title": "Sample website - list"
},
"components": ["text","cards"],
"data": [
{
"title": "This is a sample text",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing",
},
{
"type": "SMALL",
"items": [
{
"image": {
"source": "https://picsum.photos/380/210",
"alt": "This is a nice image"
},
"link": "/articles/sample-article",
"title": "A sample article",
"text": "Lorem ipsum dolor sit amet..."
}
]
}
]
}Using this JSON structure the website would display a text and a cards component.
Implement Server-Side Rendering
When we had the site running with static JSON files, the next milestone was to integrate it with the Umbraco Backend.
Integration from Frontend POV
When dealing with server-side rendering there are some differences you have to keep in mind. First of all, it makes sense to create a separate entry point for your application, one which is only invoked when it’s being executed on the server side. You need to avoid using the window object and replace Router with StaticRouter.
Integration from Backend POV
The simplest way of generating the HTML markup on the Backend side is to call the ReactDomServer.renderToString method of react-dom. This will return the source of your webpage.
Async page load + Client Side Rendering
To boost the performance, the user experience of our website and to reduce some of the weight on the servers, we were careful of using async page loads. After the first page load, when the user navigates between the site pages, the HTML markup is no longer requested from the server, only the the necessary data to render the page on the user’s computer is required. This technique should improve the page load, and reduce network traffic.
Implementation on the Frontend Side
As you can see it’s just a couple of lines, but it’s responsible for the whole Client Side Rendering.
Runtime cache pages
We used Redux to build our application’s business logic. This has all the features needed to implement professional page caching. By this, we mean the caching of the API response on the individual page requests. Since this is raw JSON data, it’s really easy to do this.
As you can see, we store the API response using the current pathname. The next time the user goes to the page, this data is simply retrieved.
Client Side DISABLED JAVASCRIPT — Impossible?
When people are talking about React applications, they don’t really think in terms of no-JS solutions. Of course in 2019 the number of devices where Javascript is disabled is around 0.2%, but still, there are some.
My first thought was, the browser is going to display a blank page without JS, since React cannot render anything. But I was wrong. Thanks to the Server Side Rendering approach, the page was rendered and working without Javascript!! Of course, the luxury features like page caching or async page load weren’t working, but still, the website was usable.
Possible Issues & Headaches
The local development was created completely separately, so the Backend and Frontend codebases were merged only on the common DEV server. This caused some weird issues, when the app was not rendering anything, or crashed on the server side with errors. In these cases, the investigation took a bit longer, since the debug options in the React code running on the Backend server are more limited, and sometimes the error messages are not so straightforward. Besides these issues, we did not run into any edge cases or blocker situations. Personally, I believe the number of these issues is going to be reduced in the future as we create more pages with this technology.
