ASP.NET Core 3.1 with React - Server Side Rendering / Pre-rendering - two web services required?

Question

In ASP.NET Core 2.2 it was rather straightforward to have an ASP.NET Core website with React front-end and working server-side rendering - since SSR was supported out-of-the-box in the ASP.NET Core+React template, which internally run the NodeServices to executed the javascript using node.

However with ASP.NET Core 3.1 things are not so easy anymore, mainly because the SpaServices and NodeServices classes are declared as obsolete and will be removed with .NET 5, according to this link. So no javascript execution with node from C# anymore.

Now, besides the information, that the server-side rendering suggested in ASP.NET Core 2.2 is now obsolete, the only suggestion how to go forward I found is from above article:

To enable features like server-side prerendering and hot module reload please refer to the documentation for the corresponding SPA frameworks.

But if I understand correctly, to have react-based server-side rendering, I need to have a node.js server which will perform the rendering on the server-side.

Does that mean, that if I want to have an ASP.NET Core 3.1 website with a React front-end with SSR - I should have one ASP.NET Core project for the WebAPI, and another separate Node.JS project for the front-end with SSR?

And then deploy them on two separate Azure AppServices?

Is that the recommended architecture for ASP.NET Core + React projects?

Answer 1

After spending some time researching, that are the current options:

• Live on .NET Core 3.1 with the NodeServices with an obsolete flag
• Create separate projects for back-end (asp.net) and front-end (node.js)
• Fork/copy NodeServices and maintain by myself
• Hope that a there will be a community driven fork of the NodeServices in the comming months before .NET 5 release were it will be removed eventually

Answer 2

I came across exactly the same problem. It took me a few weeks to create a new set up where frontend is separate from the backend.

I published the prepared boilerplate on GitHub and wrote a blog posts that explains how to enable server-side rendering with ASP.NET Core and React in details. The solution is a combination of CRA (Create React App), Storybook for CRA and a standard ASP.NET Core MVC template.

To make a long story short I built my custom asp-prerender-module and asp-prerender-data attributes. They communicate with an Express server based on Node.js to get the rendered HTML. Thereafter the HTML served to the browser gets "hydrated" with actions.

Answer 3

You can use a new library to invoke JS from .net which is

https://github.com/JeringTech/Javascript.NodeJS

You can use SSR on .net with the above library Razzle described here:

https://dev.to/pruttned/integrating-react-into-asp-net-core-using-razzle-with-all-the-goodies-like-ssr-routing-code-splitting-and-hmr-part-1-2-34g8

BUT at the time of writing I find that there is no information on how to deploy such an application.