React如何处理来自PhantomJS的预编译HTML?

时间:2016-08-09 13:46:32

标签: ajax reactjs phantomjs

我使用webpack编译了我的reactjs并获得了一个包文件bundles.js。我的bundles.js包含一个进行API调用以获取数据的组件。

我把这个文件放在我的html中,并将url传递给phantom.js,以便出于SEO的原因预编译静态html。

我在这里见证了一些奇怪的事情,ajax呼吁APIS根本没有被解雇。

例如,我有一个名为Home的组件,当我请求url /home时会调用它。 My Home组件向后端(django-rest)发出ajax请求以获取一些数据。现在,当我在phantomjs中调用主页时,这个api调用不会被解雇。

我在这里错过了什么吗?

1 个答案:

答案 0 :(得分:0)

自2014年以来,我一直在Phantomjs中使用基于React的应用程序渲染。请确保使用最新的Phantomjs版本v2.x. Phantomjs的问题之所以出现是因为它使用了较旧的webkit引擎,所以如果你使用了一些CSS3功能,请确保它们的前缀正确,例如flexbox布局。

从JS方面来看,PhantomJS不支持许多较新的API(例如获取等),要解决此问题,请添加polyfill和您的罚款。最复杂的是追踪错误,使用console.log并评估Phantomjs中的代码。还有调试模式实际上很难使用,但这可以帮助您追踪复杂的错误。我使用基于webkit引擎的浏览器Aurora来追踪一些问题。

要调试网络流量,请尝试记录请求和接收的事件:

mousedown