如何在第一次加载 ReactJS 时加载轻量级 html?
How to load light-weight html at first load with ReactJS?
如果客户端还没有下载 main.js 文件,我如何让我的 webapp 在服务器端呈现并只发送现成的 html 给客户端?
在服务器上,使用具有相同组件 JSX 和相同道具的 React.renderToString
(https://facebook.github.io/react/docs/top-level-api.html#react.rendertostring)。然后,在您的服务器呈现的模板中,将生成的标记字符串放在您在客户端安装 React 组件的同一容器元素中。
React 组件将在浏览器和服务器上生成相同的标记,给定相同的 props。浏览器中的 React 足够智能(通过 data-react-id
属性的值)识别组件已经在服务器上呈现为字符串并在初始页面加载时传送到浏览器。因此,它不会再次呈现它——它只会连接组件的事件。
如果您的 HTTP 服务器不是基于节点的,您可以使用简单的消息传递实现(例如 ZeroMQ 或 Redis pub/sub)将呈现请求发送到一个微型节点脚本 运行同一台服务器。该脚本应该具有对您在客户端使用的相同 JSX 组件的文件系统访问权限。 Node 脚本应该接受组件 JSX 的路径和一个 props
对象,以及 return React.renderToString
的输出到您的主 HTTP 服务器以包含在模板中。
如果客户端还没有下载 main.js 文件,我如何让我的 webapp 在服务器端呈现并只发送现成的 html 给客户端?
在服务器上,使用具有相同组件 JSX 和相同道具的 React.renderToString
(https://facebook.github.io/react/docs/top-level-api.html#react.rendertostring)。然后,在您的服务器呈现的模板中,将生成的标记字符串放在您在客户端安装 React 组件的同一容器元素中。
React 组件将在浏览器和服务器上生成相同的标记,给定相同的 props。浏览器中的 React 足够智能(通过 data-react-id
属性的值)识别组件已经在服务器上呈现为字符串并在初始页面加载时传送到浏览器。因此,它不会再次呈现它——它只会连接组件的事件。
如果您的 HTTP 服务器不是基于节点的,您可以使用简单的消息传递实现(例如 ZeroMQ 或 Redis pub/sub)将呈现请求发送到一个微型节点脚本 运行同一台服务器。该脚本应该具有对您在客户端使用的相同 JSX 组件的文件系统访问权限。 Node 脚本应该接受组件 JSX 的路径和一个 props
对象,以及 return React.renderToString
的输出到您的主 HTTP 服务器以包含在模板中。