Best way to do SEO for a Client side rendering React Project

Question

How to handle SEO for a single page application which is built using ReactJS, Webpack, React Router for routing and redux store? Also Google, Facebook crawler should be able to see my website content for indexing.

Answer 1

Handling SEO's for single page applications is tricky. This is not only relevant to react, but to all front end libs and frameworks(angular etc.)

If most of your information is coming from API call in you single page application then google bots actually dont wait for API calls to finish. Now as your API call is not completed your content is not read by google bots and there goes your SEO.

I tried above in google console. I would say do give it a try. They show a snapshot of how bots actually see your page.

So from my personal experience I would say the best solution would be to go for server side rendering. There are 2 ways in which you can do so:-

1. Either use phantom.js to pre-render your pages or Use prerender.io service which use phantom.js internally.
2. Render first load of your app from backend, by backend I mean dont call the API's but render information by querying the database directly(this should be only for first load, after that react-router should pick it up fine as single page application).