服务器渲染在静态网站上反应js

时间:2014-09-11 02:08:27

标签: javascript node.js nginx static reactjs

我一直在探索很多反应,我看到你如何设置节点到服务器渲染代码之类的东西。我出于速度原因对使用静态页面非常感兴趣,但我不确定在使用静态html时是否可以渲染反应组件。

我可以使用像nginx这样的东西来触发反应渲染吗?或者我是否需要更多并且必须使用节点,轨道或sinatra之类的东西?很抱歉,如果这是一个误入歧途的问题,我就不会对服务器客户端的互动有很强的感觉。

3 个答案:

答案 0 :(得分:8)

我们导出一个允许您呈现为静态HTML的函数 - ReactDOMServer.renderComponentToStaticMarkupdocs)。

您需要运行Node才能调用该功能。或者,您也可以在开发站点时使用该功能,并调用它来生成写入磁盘的静态HTML文件。您仍然需要节点来调用该函数,但您不需要生产中的节点。然后你可以随意使用那个文件(例如,可以与GitHub页面,S3一起使用,或者在任何地方使用它,因为它只是HTML)。

答案 1 :(得分:5)

如果您计划在CDN中托管您的React Web应用程序(例如GitHub Pages,Amazon S3 / CloudFront,Firebase),那么您可能希望在编译期间将所有基于反应的页面预呈现为静态HTML文件步。这是一个例子:

https://github.com/koistya/react-static-boilerplate

(免责声明:我是作者)

下一步,您可以为此站点添加Travis CI自动构建配置,以便在将新版本的源文件推送到GitHub存储库时,Travis CI将构建项目并将其推送到GitHub Pages(或Amazon S3,Firebase)。

答案 2 :(得分:3)

是的,使用服务器呈现,您可以生成网站的静态版本,并像任何静态网站一样提供服务。

来自https://github.com/reactjs/react-page

  

React可以为动态的,网络连接的应用提供支持。但是使用react-page,   React也可用于构建静态博客,Github文档,   或任何其他静态网站。因为react-page使用服务器渲染,   创建静态站点就像单个wget命令一样简单。

     

node server.js wget -mpck --user-agent =“” - e robots = off   http://localhost:8080/index.html获取OS X上的wget:试试   http://osxdaily.com/2012/05/22/install-wget-mac-os-x/或者如果你有   brew:brew install wget

     

这预先构建了整个交互式网站,因此可以从中提供服务   文件服务器或github等。别忘了在你的文件上启用gzip   服务器! React标记很大但压缩效果非常好。