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

Server rendering React js on a static website

本文关键字：React js 静态网站服务器更新时间：2023-09-26

我最近一直在探索react，我看到了如何设置节点到服务器的渲染代码。出于速度的原因，我对使用静态页面非常感兴趣，但我不确定在使用静态html时是否可以渲染react组件。

我可以使用类似nginx的东西来触发react渲染吗？还是我需要更多，必须使用node、rails或sinatra之类的东西？很抱歉，如果这是一个被误导的问题，我对服务器-客户端交互没有强烈的感觉。

我们导出一个函数，该函数允许您呈现为静态HTML-ReactDOMServer.renderComponentToStaticMarkup（文档）。

需要Node运行才能调用该函数。或者，您也可以在开发网站时使用该函数，并调用它生成一个静态HTML文件，将其写入磁盘。您仍然需要node来调用函数，但在生产中不需要node。然后，您可以随心所欲地使用该文件（例如，可以与GitHub页面、S3或任何地方一起使用，因为它只是HTML）。

如果您计划在CDN中托管React web应用程序（例如GitHub Pages、Amazon S3/CloudFront、Firebase），那么您可能需要在编译步骤中将所有基于React的页面预呈现为静态HTML文件。这里有一个例子：

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

（免责声明：我是作者）

下一步，您可以为该网站添加Travis CI自动构建配置，这样，一旦新版本的源文件被推送到GitHub存储库，Travis Cl就会构建项目并将其推送到GitHub Pages（或Amazon S3、Firebase）。

是的，使用服务器渲染，您可以生成网站的静态版本，并像任何静态网站一样为其提供服务。

发件人https://github.com/reactjs/react-page

React可以为动态、网络连接的应用程序提供动力。但对于react page，React还可以用于构建静态博客、Github文档，或任何其他静态站点。由于react页面使用服务器渲染，创建一个静态站点就像一个wget命令一样简单。

node-server.js wget-mpck--用户代理="-e robots=关闭http://localhost:8080/index.html在OS X上获取wget：尝试http://osxdaily.com/2012/05/22/install-wget-mac-os-x/或者如果你有brew：brew安装wget

这预先构建了整个交互式网站，因此可以从文件服务器或github等。不要忘记在文件上启用gzip服务器React标记很大，但压缩效果很好。