Using prerender.io with ReactJS for SEO

Question

I've realized that my ReactJS application using react-router does not have any external links. Search engines do not recognize that the site has a lot of linked content. Prerender.io seems like a good solution to this, but I cannot get it to work for my ReactJS application.

Can prerender.io be used with ReactJS? If not, is there another good way to improve SEO for my site without doing all the rendering server-side?

EDIT: Upon further digging, I realized that the issue here is that react-router uses a "#" by default, and not a "#!". Is it possible to make react-router work with a "#!"?

Answer 1

Prerender appears to expect real urls, because otherwise you can't serve the cached html to normal people (the hash isn't sent to the server).

When setting up react-router ensure it's using the history mode:

Router.run(routes, Router.HistoryLocation, function (Handler) {

In your server you'll need to ensure that all routes that don't match a static file are served by either sending index.html, or using prerender.

You can search for 'send all requests to index.html {insert server name here}' to find details on this.

---

It seems that by default prerender only applies in certain situations. Here's an example if you're using the express.js middleware in node.js:

require('prerender-node').shouldShowPrerenderedPage = function(){ return true }

You should be able to figure out similar modifications for other middleware (it'll require a fork in less flexible languages).