时间戳

首页 > 解决方案 > 以谷歌搜索引擎优化获取时反应白页

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

问题描述

我一直在我的 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 组件可能太“重”而无法按时呈现。

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

标签： reactjsprerender

解决方案

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

推荐阅读