使用 ReactDOM.hydrate 的服务器端呈现

Server-side rendering with ReactDOM.hydrate

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

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

hydrate 的预期用途是什么?

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

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

hydrate 的用法不限于 renderToNodeStream - 您可以(实际上应该)也将它与经典的 renderToString 一起使用。 renderToNodeStream 本质上与 renderToString 相同,只是它生成的是 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 App 需要它。它不会在服务器端的状态更改和重新呈现方面添加任何内容。另一方面,hydrate 并没有在此主题中引入任何新内容 - 它只是对旧 render.

进行了调整,更宽容的版本

官方文档说明很多! https://reactjs.org/docs/react-dom.html