【问题标题】:Server-side rendering with ReactDOM.hydrate使用 ReactDOM.hydrate 进行服务器端渲染
【发布时间】:2018-03-06 08:27:24
【问题描述】:

hydratelanded to React 16,但尚未记录其使用。

This article 建议它应该与renderToNodeStream 一起使用,但没有提供太多细节。

hydrate 的预期用途是什么?

renderToString 是同步的。它也无法处理重新渲染的组件,即在初始渲染期间组件状态发生同步(即相同的滴答声)更改并且应该触发额外的render 调用时。示例是 Helmet,它需要 a workaround 才能将嵌套 Helmet 的更改传播回服务器端的*组件。

hydraterenderToNodeStream 能否帮助避免 renderToString 限制并在服务器端呈现异步和/或重新呈现的组件?

【问题讨论】:

    标签: node.js reactjs server-side-rendering react-fiber


    【解决方案1】:

    hydrate 的用法不限于renderToNodeStream - 你可以(实际上应该)也将它与经典的renderToString 一起使用。 renderToNodeStreamrenderToString 基本相同,不同之处在于它生成的是http 流而不是字符串。这意味着您可以在渲染期间逐字节将渲染的html发送给客户端,这与标准renderToString相反,当您必须等待整个html字符串首先被渲染时,并且只有之后可以发给客户吗。

    ReactDOM.hydrate 是标准ReactDOM.render 的替代品。基本的(也是唯一的?)区别在于,与ReactDOM.render 相反,如果客户端上的 React 校验和与服务器上计算的校验和不匹配,它不会丢弃所有 DOM。即使存在一些细微的差异,它也会尝试将 React 客户端应用程序附加到服务器渲染的 DOM,只修补不同的部分。

    由于renderToNodeStream 的流式传输性质,在库的当前状态下,Helmet 的服务器端使用实际上是不可能的 - DOM 的 head 部分在 React 获取计算时发送到服务器DOM 包括 Helmet 的组件。流不能只是恢复并将 Helmet 的更改附加到 head

    总而言之,回答您的问题 - renderToNodeStream 通过发送流解决了同步渲染到字符串的问题,但它引入了新问题,即如果 React 应用程序的其他部分需要它,则无法修补推送的内容.它不会在服务器端的状态更改和重新渲染方面添加任何内容。另一方面,hydrate 并没有在这个主题中引入任何新内容——它只是旧的render 的调整、更宽容的版本。

    官方文档解释了很多! https://reactjs.org/docs/react-dom.html

    【讨论】:

      最近更新 更多