如何使用ReactJS在首次加载时加载轻量级html?

时间:2015-07-10 12:47:14

标签: reactjs single-page-application flux

如果客户端没有下载main.js文件,我如何使我的webapp呈现服务器端并仅向客户端发送即用型html?

1 个答案:

答案 0 :(得分:2)

在服务器上,使用React.renderToStringhttps://facebook.github.io/react/docs/top-level-api.html#react.rendertostring)与相同的组件JSX和相同的道具。然后,在服务器呈现的模板中,将生成的标记字符串放在安装React组件客户端的同一容器元素中。

React组件将在浏览器和服务器上生成相同的标记,并给出相同的道具。浏览器中的React足够智能(通过data-react-id属性的值)来识别组件已经呈现给服务器上的字符串并在初始页面加载中传递给浏览器。所以,它不会再渲染它 - 它只会挂起组件的事件。

如果您的HTTP服务器不是基于节点的,您可以使用简单的消息传递实现(例如ZeroMQ或Redis pub / sub)将呈现请求发送到在同一服务器上运行的微小节点脚本。此脚本应具有对使用客户端的相同JSX组件的文件系统访问权限。 Node脚本应该接受组件JSX和props对象的路径,并将React.renderToString的输出返回到主HTTP服务器以包含在模板中。