Prerender your SPA using Netlify For Better SEO

For those of us who've written and deployed ReactJS SPAs (single page applications) only to find that they don't have the best SEO, this article is for you.

There is a really simple fix that doesn't involve turning on server-side rendering.

First of all, if you haven't tried Netlify, I encourage you to do so. It's a free service to get running on, and it integrates directly with Github - you can even login using your Github credentials.

My pal James Vidler has a really good article that describes getting your site deployed to netlify from the command line using the cli.

It's basically as simple as this - assuming your build output is in the /build directory:

> npm run build
> npm install -g netlify-cli
> netlify login
> netlify deploy --dir=build --open

I encourage you to read Vidler’s article on this to get running in netlify. Once you have that going, if you actually login to Netlify itself, you’ll see some additional Settings once you click on Settings > Build & Deploy

Scroll down until you see the section on Prerendering.

This service is documented here on Netlify, but the long and short of it is that whenever a bot is detected trying to hit your site, it gets served a prerendered version of the site.

As an example, here is the source of my test SPA normally:

It’s not very SEO-friendly, to say the least.

Now let’s use Chrome’s developer tools to set my user-agent and we can pretend to be the Google search bot. You’ll have to turn on the “Network Conditions” tab to do this.

Now, you can set your user agent easily.

Let’s refresh the same page and see what we get.

Looks much better in terms of SEO.

Now, as long as you are rendering decent

FYI - I work for Agility CMS - use it for free with React + Netlify!