如何使用 ReactJS 在第一次加载时加载轻量级 html？

Question

如果客户端尚未下载 main.js 文件，我如何让我的 webapp 呈现服务器端并仅向客户端发送现成的 html？

Answer 1

在服务器上，使用 React.renderToString (https://facebook.github.io/react/docs/top-level-api.html#react.rendertostring) 和相同的组件 JSX 和相同的 props。然后，在您的服务器渲染模板中，将生成的标记字符串放在您在客户端安装 React 组件的同一容器元素中。

React 组件将在浏览器和服务器上生成相同的标记，给定相同的道具。浏览器中的 React 足够智能（通过 data-react-id 属性的值）来识别组件已经在服务器上呈现为字符串并在初始页面加载时交付给浏览器。因此，它不会再次渲染它——它只会连接组件的事件。

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