同构 React，prerender.io 相对于 react-engine 的优势？答案

【问题标题】：Isomorphic React, advantages of prerender.io over react-engine?同构 React，prerender.io 相对于 react-engine 的优势？
【发布时间】：2015-06-15 11:24:21
【问题描述】：

我看到 prerender.io 是基于 phantom.js 的解决方案，而 paypal 的 react-engine 似乎更轻量级的解决方案。我需要决定使用哪一个。
prerender.io 比 react-engine 有什么优势？ SPA 和没有 SPA。

【问题讨论】：

标签： reactjs prerender react-engine

【解决方案1】：

如果您正在构建一个同构的 react 应用程序，那么 react-engine 或您自己的渲染初始页面的方式就足够了。

如果您可以使用 prerender.io 之类的付费服务，那么它也可以使用无头 webkit 浏览器（例如 phantom.js）来做同样的事情。 Prerender.io 在 phantomjs 等无头 webkit 浏览器中打开网页，并将呈现的 HTML 返回给搜索引擎。在此过程中，它会缓存呈现的 HTML。因此，后续请求将得到更快的服务。它适用于几乎所有使用 AngularJS、Backbone 等构建的 SPA 应用程序。

但是对于 react，我认为这是一种矫枉过正的做法，而且当您可以轻松完成时，也不需要付费服务。 React 为您提供 API 以使用 React.renderToString 和 React. renderComponentToStaticMarkup 在服务器中轻松呈现组件

非常简单的方法如下所示：

 Router.run(routes, url , function(Handler, routerState) {
        var handlerElement = React.createElement(Handler);
        var html = React.renderToString(handlerElement);
        res.send(html);
    });

这只是我最近构建的同构应用程序的一个 sn-p。

您可以参考 ConMAN 一个同构的 reactjs 应用程序，我使用以下技术堆栈构建：Koa、React、React-router、Flux Architecture 和 Browserify。

【讨论】：

您也可以自托管 prerender.io 并避免任何费用。

【解决方案2】：

请记住，React 应用程序中的同构架构增加了一些复杂性，例如比较这两个项目 （免责声明：我是作者）：

https://github.com/kriasoft/react-starter-kit - 同构 React 应用程序
https://github.com/kriasoft/react-static-boilerplate - 单页 React 应用程序 (SPA)

【讨论】：