Create-react-app is a great tool for building React applications and websites. It’s super simple to use and creates a whole development environment without and build configuration. You do not need to struggle with setting up webpack and other tools just to work with react. It’s all there ready for you to use.
Once installed you have everything you need. A test environment, ES6 support, a local server for testing, etc. It’s a great app and it is easy to add other packages such as react-router on to your app. If you end up needing to configure things you can always eject the project and get full access to all the configurations.
Google Indexing
Most Internet traffic comes from Google. Any successful website will want Google to properly and throughly index their content.
For most of the Internet’s existence, search engines did not render JavaScript when crawling websites. This meant that any content created with JavaScript was not included in a search engine’s results. This is still the case with many search engines, but Google’s web crawler is now able to render JavaScript. This means that Google is able to properly index JavaScript created content.
This is great news for React, Angular and other tools which create dynamic content websites. Content rendered through JavaScript is now visible in Google searches.
Create React Blank In Google Fetch
One of the best ways for a webmaster to see how Google see’s their website is to use Google Webmasters tools. This is a tool set that lets website owners tell Google how to crawl their website. It also provides information on search results for a website.
One thing that Webmasters Tools does is provide a “Fetch as Google” tool. This tool shows webmasters exqactly what Google’s crawler sees when going to the page. This is the content that Google will index.
My first create-react app was full of content that was rendered using asynchronous requests. The content was also displayed using reat-router version 4. All these advanced JavaScript tools made creating the website easy and fun. However, Google did not index the website.
When I tried to “Fetch as Google” the sites rendered as blank pages. This meant that Google was seeing a blank page and did not see any content to index. That’s bad news for SEO and getting any kind of traffic from a search engine!
Most online solution call for server side rendering to solve crawler issues like this. Server side rendering means that the website is first created on your server and then the created content is sent to the client in one swoop. This is the opposite of how my page currently acted. Because my page had a number of asynchronous requests, the content loaded one by one, as soon as each piece of content became available. A server side render would slow down the initial page load.
Server side rendering is not currently supported by create-react-app, and looked difficult to implement on a complicated app like mine. I was not looking forward to redoing my app to make it render from the server, but I also wanted google to index my content. What to do?
The Solution
After a bit of research and some debugging I realized that the problem was not with any specific tool I was using. At first I thought the problem was that React Router and Google did not play well together, but that is not the case. I also thought maybe my asynchronous loading was too slow for Google, but that was not the problem either.
The problem is somewhere in one of the create-react-app plugins. At least one of the plugins uses JavaScript that is too modern for the Google crawler. It’s likely a version of ES6 that is not supported by the Google crawler.
Because the modern JavaScript used in create-react-app is not supported by the older JavaScript engine used by the Google crawler, the page throws a JavaScript error and is rendered blank.
It’s interesting to know that the Google cralwer uses an older JavaScript engine.
The simple solution is to create a polyfill for the ES6 JavaScript that Google cannot understand. The easiest way to do this is to just add “babel-polyfill” to your app. This is done in two simple steps.
First, install babel-polyfill:
npm install babel-polyfill
Then add it to the topmost section of your react app. In my case this was my src/index.js file. Just include:
include "babel-polyfill"
At the top of the page with all your other includes.
After performing these two steps Google was able to crawl my site without a problem. It saw all the routes and loaded all the asynchronous data without a problem.
Immediately after adding babel-polyfill I was able to Fetch as Google and see the correct contents of the site instead of a blank page.
