23

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?

4 Answers 4

9

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.

1
  • 2
    A messy solution IMO, which is probably why the aspnet core team dropped this too. It's a hassle, but cleaner to separate the projects. Well done on figuring it out though!
    – georgiosd
    Apr 23, 2020 at 11:17
8

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
1
  • Can you provide any relevant article or code samples ?. New developers may not understand the bullet points you listed above.
    – shivu
    Oct 26, 2021 at 3:47
1

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.

4
  • Struggling with this one... The tutorial is skipping important information like what packages to install and where to put the code. How was your experience? Could you deploy it eventually? Nov 7, 2021 at 12:15
  • yeah I did. This works in production now. Ask me specific questions and I will try to reply ;-) Nov 9, 2021 at 9:07
  • I have many most are how to basic ^^. Here my most pressing one. I got some basic SSR Razzle working with the sample project and our page but it didn't show the theme. Theme data is stored in localStorage so is localStorage not available via SSR? Nov 10, 2021 at 10:24
  • ofc not. The only option is to have a non-httponly cookie
    – Pieterjan
    Dec 16, 2021 at 14:01
1

Reactjs is working on the Server component to stream partially rendered UI in the form of JSON data to clientside. https://github.com/reactjs/rfcs/blob/2b3ab544f46f74b9035d7768c143dc2efbacedb6/text/0000-server-components.md

I think for future integration of Server component, it needs a native NodeJS process to handle server rendering.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.