React Server-side Rendering with ReactJS.NET
Tags: Server Side Rendering, React, JavaScript, Net Core, Aspnetcore

React Server-side Rendering with ReactJS.NET

Step by step guide for React server-side rendering using the ReactJS.NET library INDRAJITH Follow Apr 15 · 5 min read

React SSR ≠ React SC ≠ ReactJS.NET

Traditionally React server-side Rendering (SSR) or React DOM Server is introduced to render React elements in index.html for the initial page load. This allows the user to see something meaningful even before React starts to bootstrap in the browser.

Besides, React Server Components (SC) is also around the corner to render React Components on the server-side on demand. Though it’s still in the experiment stage, it fills the gap with SSR, allowing React running in the browser to dynamically load components rendered on Server.

Finally, ReactJS.NET is a library that combines the best of SSR and SC for .NET. Therefore, If you use .NET for the backend, you can use the library with both ASP.NET MVC 4/5 and .NET Core.

In this article, I will discuss the steps for React server-side rendering using the ReactJS.NET library. Let’s Jump in!

Using React.NET in Practice

Let us dig into how we can use server-side rendering with .NET. To simplify the implementation, I’m using a library named ReactJS.NET. Though it primarily focuses on ASP.NET MVC, it works with other environments as well.

Step 1: Create a Project and Include Dependencies

First, you can create an ASP.NET MVC Web Application project using Visual Studio. Then you can install the ReactJS.NET by using Nuget by searching for “React.AspNet”.

Change the App_Start\ReactConfig.cs for ASP.NET MVC 4/5 or Startup.cs for ASP.NET Core respectively, to reference the JSX components.

By doing so, all the required JavaScript files get loaded server-side from the ReactJS.NET.

You have to include all the JavaScript files for all the components you wish to load with their dependencies.

Step 2: Render components and pass props

Call Html.React inside the ASP.NET MVC to render the relevant component on a server-side basis.

@Html.React() extension method to render a component and pass props either within the client-side code or on the server(Razor view).

Then, pass all the required props and the name of the component accordingly.

Step 3: Render the initialization script

You have to first load all of the scripts in the usual way first. Then call Html.ReactInitJavaScript before the body closing tag ( </body> ) at the end of the page. It will render the initialization scripts.

But this does render only the initialization scripts and not the other JavaScript files of your components.

Step 4: Observer server-side rendering

Then, you can check your application being rendered server-side. The components and JavaScript files you render from the server-side will be passed as HTML code to the browser.

The React client-side may reuse this HTML to make your page load faster with lower latency. By this method, the initial rendering possess will be way faster and much efficient.

Note: You can temporarily disable your server-side rendering if there are errors in your JavaScript code.

After that, you can debug the components. To disable the server-side rendering, call DisableServerSideRendering() within the ReactJS.NET config.

Step 5: Wrapping up

Sometimes you may prefer to render the application from the server-side. Then you can enable server-side only rendering.

To do this, you have to call a specific function. Call the Html.React and then pass the parameter serverOnly value to true.

If you do this, it’s not required to load React Script or call Html.ReactInitJavaScript() since its completely rendered on the server-side.