The problem with the javascript frameworks is that they are NOT perfect search engine friendly. Although Google can crawl and index Ajax content but it is not so reliable and need to follow the guidelines. The advantage of React.js is that you can run it on the server and the virtual DOM will be rendered and returned to the browser as a regular web page. In this post, we will implement a sample in ASP.NET to pre-render the initial state of your React components server-side and the outcome is already rendered page of markup. So it will be indexed just like any other static page by search engine.

If you are new to React.js, I strongly recommend to read following tutorial:

React.js: Introduction and Hello World with ASP.NET MVC 5

Getting started:

Software versions used in the tutorial:

Visual Studio 2012

ASP.NET MVC 5.0

React.js 0.12.2

ReactJS.NET 1.3

Set up the Project:

1. Open Visual Studio > File > New Project > ASP.NET MVC 5 Empty Project, Call it "ReactSEO" > OK

2. Install React.js by running following command in the Package Manager Console

Install-Package react.js

It will add react javascript files in Scripts folder.

3. Similarly Install ReactJS.NET:

Install-Package React.Web.Mvc4

It will add react library references in the project.

Controller:

4. Add "MVC5 Empty Controller" (HomeController.cs), replace the content of Index method with following and add View.

 public ActionResult Index()
        {   
            var employees = new[]{
                    new  {id= "1", name= "John", department= "IT", phone= "555-1212"},
                    new {id="2", name= "Akash", department= "Sales", phone= "555-1213"},
                    new  {id= "3", name= "Suman", department= "HR", phone= "123-456"}
            };
            return View(employees);
        }

For demo purpose, I took anonymous object of data to display.

Grid Component:

5. Add a javascript file "Grid.jsx" in Scripts folder and add following content:

var Cell = React.createClass({   
    render: function () {
        var data = this.props.data;
        return <div className="cell">{this.props.data}</div>
    }
});

var Row = React.createClass({
    render: function () {
        return (<div className="row">
            <Cell data={this.props.data.name} />
            <Cell data={this.props.data.department} />
            <Cell data={this.props.data.phone} />
        </div>);
    }
});
var Grid = React.createClass({
    render: function () {
	var headerRow = <div className="row">
            <Cell data="Name" />
            <Cell data="Department" />
            <Cell data="Phone" />
        </div>;

        var rows = this.props.data.map(function (rowData, index) {
            return <Row key={index} data={rowData}>Row</Row>;
        });
        return <div className="table">{headerRow}{rows}</div>;
    }
});

It is simple component to display data in tabular way.

Server Side Rendering:

6. Open App_Start\ReactConfig.cs to reference Grid components:

public static class ReactConfig
	{
		public static void Configure()
		{
            ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
                .AddScript("~/Scripts/Grid.jsx");
		}
	}

This tells ReactJS.NET to load all the relevant JavaScript files server-side. The JavaScript files of all the components you want to load and all their dependencies should be included here.

7. Open Index View and call Html.React to render a component server-side

@Html.React("Grid", new
{
    data = Model
})

Call Html.ReactInitJavaScript at the bottom to render initialisation scripts.

@Html.ReactInitJavaScript()

Note: this does not load the JavaScript files for your components, it only renders the initialisation code.

The full code of View is as follow

<h2>React Demo:</h2>

@Html.React("Grid", new
{
    data = Model
})

<script src="~/Scripts/react/react-0.12.2.min.js"></script>
<script src="~/Scripts/Grid.jsx"></script>
@Html.ReactInitJavaScript()

Run the page, you will get the following output

The server-rendered HTML will automatically be reused by React client-side and it can be easily crawled by search engines.

Conclusion:

We have implemented server side rendering of React.js which speeds up initial page loads as users do not need to wait for all the JavaScript to load before seeing the web page and it is SEO friendly also.

Enjoy React.js !!