Menu
I've just coded my first website using reactjs, but when I check how google sees my website, I receive the following result:
My HTML file looks like this:
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="root"></div>
<script async type="text/javascript" src="index.browser.js"></script>
</body>
</html>
I've deactivated all AJAX-calls for testing, and the ReactDOM.render gets executed right after its js file was loaded. The JS file itself is compiled, compressed and less than 300 KB big (including all libraries like react itself).
At this point, I don't understand which changes I can do to make google render my page correctly? As far as I have understood, google rendering issues with reactjs commonly source from AJAX calls or other long work that is done in application code before the website itself gets rendered and the DOM changed. But after removing big libraries (apart from i18next and react itself), minimizing and compressing the code, I don't see what I could do to improve the performance or rendering time significantly. PageSpeed Insights is on 99/100 points (desktop, only complaining I could minimize the html to save 110 bytes).
Any ideas where my mistake could be? Server-side rendering is not really a suitable option for me.
You can inspect the demo page here: http://comparo.com.mx
As you can see, there is not much - but the HTML content displayed gets rendered right after loading index.browser.js, which is a file < 300KB and should therefore not hold google search console back from rendering the page correctly.
EDIT: My server is located in europe, and afaik the google servers crawl from the US. Could that be in any way an issue?
402
Add babel polyfill to your project:
npm install --save babel-polyfill
And then import it in your index.js (entry point):
import 'babel-polyfill';
Hopefully, this will solve your problem.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
