Create Web optimization-friendly net apps
Not too long ago I needed to strive if Umbraco CMS may very well be built-in with a React entrance finish whereas remaining Web optimization pleasant. The answer has to incorporate server-side rendering (SSR) if we need to make it as straightforward as potential for net crawlers to index our net pages. This code was a part of a Proof of Idea at Authority.
I stumbled throughout completely different sources associated to SSR and Umbraco equivalent to this text or ReactJS .NET, however the first one has a lacking repo, and the opposite one has not been up to date since June 2020, which signifies that it doesn’t help React 18 as of in the present day when penning this put up.
After just a few trials and errors, I may get one thing fairly clear working, so I believed I’d share with you the implementation I adopted.
The answer consists of three completely different components:
- Umbraco Net software
- Server-side rendering software (Specific — Node.js)
- React software
Concretely, the primary request is made to an Umbraco RenderMvcController involving SSR from the Specific server, and all subsequent requests are made out of the React software to numerous Umbraco ApiControllers.
Docker-compose to run the app, however the chance to debug domestically.
The primary request is made an Umbraco RenderMvcController. By default, all doc varieties within the Umbraco venture share the identical template, thus all requests to Umbraco pages will use the identical operate i.e. IndexAsync from throughout the SsrDataController.
From there, the controller retrieves the mannequin by a name to the Mediator with a purpose to retrieve the mannequin wanted for our SSR.
As soon as the mannequin is retrieved, it’s injected within the ensuing template Index.cshtml and makes use of Grasp.cshtml template.
The TagHelper (asp-prerender-data) added to the basis of our React net app, will in flip make a POST request to our Specific server with the mannequin as payload.
Our App part is instantiated server aspect and supplied with all the info essential to render the web page (injected by way of props).
As soon as the App part of our React software is rendered, it’s returned as a string to our Umbraco software, that may lastly inject it in our view, and return that view to the consumer.
For those who examine the code supply of the web page, you’ll then see that the physique of the web page is current and prepopulated with knowledge.
All subsequent requests from the React app are utilizing different endpoints directed in direction of varied Umbraco API controllers.
NB: When a part is pre-rendered, useEffect hooks should not run, therefore no requests are made at the moment.
NB2: In case your software incorporates routing, be certain to make use of StaticRouter as an alternative of BrowserRouter, in any other case ReactDOMServer will fail to render your part. That’s the reason why the basis of my software is wrapped with a Router.tsx part that may decide which router sort to decide on.
The Umbraco purposes is split into three varieties of doc varieties:
- Collections
- Elements
- Web page varieties
The web page varieties are fairly easy and primarily include properties:
- Metadata
- Block Checklist of sections > Containers > Blocks
The React software is ready up by way of Create-React-App and is pretty fundamental with a Navigation bar, the principle physique, and some block varieties. Nothing fancy.
The one requirement right here is that the React app ought to clearly concentrate on the response sort returned by a few of the Umbraco ApiControllers.
All of the code is obtainable on this GitHub repo, and the README gives all the knowledge vital to construct and take a look at the answer.
Solely a single request to retrieve the physique of the web page is made on this instance, which is sufficient to retrieve the completely different sections and blocks of the web page. Although different requests could be wanted to retrieve the info from the navigation gadgets, or subsequent requests made by different elements after they’re loaded for instance.
I’ve not included that half right here for simplification functions.
The request for initiating the prerendering is impressed by this repo.
