以谷歌搜索引擎优化获取时反应白页答案

【问题标题】：React white page when fetching as google SEO以谷歌搜索引擎优化获取时反应白页
【发布时间】：2019-12-13 15:27:59
【问题描述】：

我一直在尝试在我的 React 应用上做很多事情以使 SEO 友好，但不幸的是，我只看到一个没有任何结果的白页 .. 这是我尝试过的：

（PS：我实际上是在本地构建我的应用程序并使用 phantomjs 检查结果。）

1 - 在我的应用程序的最顶部使用不同的 polyfill，例如

import 'es5-shim';
import 'es6-shim'; 

import 'babel-polyfill';
import 'url-search-params-polyfill';
import 'whatwg-fetch';

2 - 从我的 APP 禁用所有 XHR 调用。

3 - 尝试尽可能简化应用程序，例如

ReactDOM.render(<div>Hello, World!</div>, document.getElementById('app'));

这里一切正常，在我的 phantomjs 结果中，我看到带有 Hello, World! 的图像！

现在每次我将我的 Root 组件重新导入 ReactDOM.render 时，我都会再次获得白页。

我没有想法，我想过将我的应用程序转换为 SSR 应用程序，但我真的很想知道没有它是否可行。听起来我的 Root 组件可能太“重”而无法按时呈现。

有什么我可以花时间研究的想法吗？

【问题讨论】：

【解决方案1】：

我建议您使用 Chrome 而不是 phantomjs 来测试您的网页。在 Prerender.io，我们看到很多 phantomjs 无法渲染较新的网站而只显示空白页面的情况，因此我们使用 Headless Chrome 来渲染网站，效果很好！

【讨论】：