reactjs-提取为google仅显示空白页 [英] reactjs - fetch as google displays blank page only
问题描述
我刚刚使用reactjs编码了我的第一个网站，但是当我检查Google如何看待我的网站时，我收到以下结果:
I've just coded my first website using reactjs, but when I check how google sees my website, I receive the following result:
我的HTML文件如下:
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>
我已停用所有AJAX调用进行测试，并且ReactJS.render在加载其js文件后立即执行. JS文件本身经过编译，压缩，并且大小不足300 KB(包括所有类似React的库).
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).
在这一点上，我不知道可以做哪些更改以使google正确呈现我的页面?据我了解，reactjs的google渲染问题通常源于AJAX调用或在网站本身被渲染和DOM更改之前在应用程序代码中完成的其他长时间工作.但是，在删除大型库(除了i18next并对其进行响应)，最小化和压缩代码之后，我看不出我可以做些什么来显着提高性能或渲染时间. PageSpeed Insights的得分为99/100分(台式机，仅抱怨我可以将html最小化以节省110个字节).
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.
您可以在此处查看演示页面: http://comparo.com.mx
You can inspect the demo page here: http://comparo.com.mx
如您所见，没有太多-但是显示的HTML内容是在加载index.browser.js(文件< 300KB，因此不应阻止google搜索控制台正确呈现页面.
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.
我的服务器位于欧洲，而afaik谷歌服务器则从美国爬网.可能是一个问题吗?
My server is located in europe, and afaik the google servers crawl from the US. Could that be in any way an issue?
推荐答案
将babel polyfill添加到您的项目中:
Add babel polyfill to your project:
npm install --save babel-polyfill
然后将其导入到index.js(入口点)中:
And then import it in your index.js (entry point):
import 'babel-polyfill';
希望这能解决您的问题.
Hopefully, this will solve your problem.
这篇关于reactjs-提取为google仅显示空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
