Javascript 将React应用程序转换为同构应用程序?

Javascript 将React应用程序转换为同构应用程序?,javascript,reactjs,Javascript,Reactjs,我已经使用React和Redux开发了一个web应用程序,然后将其与Webpack打包,它使用IIS托管,可能只是运行客户端并调用web API(.net);也托管在IIS上 如何跳转并使此应用程序“同构”,以便React代码同时运行客户端和服务器端?您需要Node.js来创建同构web应用程序 这是因为同构应用程序需要适当的服务器端运行时来在服务器上执行React Javascript代码。我不相信IIS完全支持解析Javascript——只有Node有这个运行时 如果您不使用Node,那么应

我已经使用React和Redux开发了一个web应用程序,然后将其与Webpack打包,它使用IIS托管,可能只是运行客户端并调用web API(.net);也托管在IIS上


如何跳转并使此应用程序“同构”,以便React代码同时运行客户端和服务器端?

您需要Node.js来创建同构web应用程序

这是因为同构应用程序需要适当的服务器端运行时来在服务器上执行React Javascript代码。我不相信IIS完全支持解析Javascript——只有Node有这个运行时

如果您不使用Node,那么应该在应用程序的某个阶段引入它。您可以将IIS用作反向代理:为IIS创建节点服务器以将请求转发到,让节点使用
renderString
将React呈现为静态HTML,然后让节点使用呈现的HTML响应来自IIS的请求。IIS将充当所有传入请求和响应的中间人


反向代理为应用程序增加了一些较小的延迟,但和往常一样,过早优化是所有问题的根源

您需要一些东西:

1) 运行node的一些方法:React在服务器端真正发生的唯一事情是调用
renderToString
,为您提供可以发送给客户端的标准化HTML(这只是应用程序的静态HTML呈现w/React),水合作用(稍后请参阅更多相关内容),以便将数据输入到您的组件中,和路径匹配

2) 路由器(如果您有路由):如果您的应用程序使用多条路由,则需要使用React router告诉节点应该呈现哪些组件

3) 普及的一个很好的理由:普及有一些相对简单的方面,也有一些相对复杂的方面。匹配路由并不是那么难,它本质上就是你告诉你的服务器要发送什么。universaljsw/React更难、更复杂的部分是获取数据,在初始渲染时发送给客户端。这通常涉及一些服务器端数据获取,因此您必须有一种方法来获取数据并将其传递到应用程序中以正确呈现。有办法做到这一点,但就总体复杂性而言,这无疑是一个重大进步

我就是这样做的,不需要任何服务器端数据获取:

另见:


你好,马克,谢谢你的及时回复。如果这是一个内部应用程序,经历这种痛苦有什么意义吗?简单运行客户端的应用程序是否存在任何安全问题?我很高兴!那要看情况了。至于问题的第二部分,有两件事:React通常非常安全,而库的目标之一是使其易于安全。你可以使用危险的方法,但React会迫使你明确地表达出来(“本质上:我很危险!”->
DangerouslySetinerHTML
)。第二,使其具有普遍性并不能消除任何已经存在的客户端漏洞,尤其是在私有/内部应用程序上,在这些应用程序中,面向公众的情况如何才能完美并不重要。这确实让我省去了很多痛苦。