reactjs - How does Search Engine indexing work for JavaScript web applications like REACT?

Question

I am planning to implement react.js for my application. As I am new to react I have a doubt that, how google will index the react components? And what are the best practice needed to make application properly visible in google search.

Any one has any idea please help me on this.

Answer 1

So I can safely say that I have gotten a react SPA with API calls to render perfectly in googlebot (Fetch and Render). So this is not an impossible task but I will say there isn't much documentation to help you along the way.

Since it sounds like you've got a new app, I'll outline both avenues you can potentially go down.

Server Side Pre-rendering (SSR)

Start with Server side pre-rendering (SSR) and stick to it. There are a lot of ways to do this in react and this ultimately means you'll need to stick with isomorphic libraries which support SSR.

However, by going down the SSR path the chances of being indexed by google are significantly higher since you don't have to rely on the googlebot working with your JS at all.

Client Side Rendering (A normal JS app)

Just build a normal React App with no SSR.. basically business as usual. The benefits are that you don't have to deal with any added complexity of SSR and you aren't restricted to libraries that are isomorphic. Basically this is the easiest but you have to hope your JS compiles and is run correctly by the Googlebot.

My observations

I will say server side pre-rendering is incredibly hard to get working sometimes since a lot of libraries might not support it and this in turn introduces a lot of complexity that you don't want to deal with.

The client side rendering route is just business as usual really and I can confirm that it does in fact work with Googlebot. Heres what I did to get client side rendering working:

1. Added 'babel-polyfill' to my imports list as early as possible

2. Inlined my Javascript to reduce the overall load time and minimise unnecessary calls. I did this with Razor (C#) but you can do this any way you want.

3. Added an external call to the Financial times polyfill (not sure if this ones necessary)

4. NODE_ENV=production will also help here. It'll cut the overall size of your bundle down

For anyone on C#, this is what it looks this might look like:

clientWithRender.jsx (the entry point of my jsx)

import React from "react";
import ReactDOM from "react-dom";
import 'babel-polyfill';

import App from "./App/App.jsx";
import { Router, Route, indexRouter, hashHistory } from "react-router";

ReactDOM.render(
<App></App>,
document.getElementById('App'));

Index.cshtml

<script src="https://ft-polyfill-service.herokuapp.com/v2/polyfill.min.js"></script>
@Html.InlineScriptBlock("~/Scripts/react/react.clientWithRender.bundle.js")