使用 ReactDOM.hydrate 的服务器端呈现
Server-side rendering with ReactDOM.hydrate
hydrate
有 landed to React 16,但尚未记录其使用。
This article 建议它应该与 renderToNodeStream
一起使用,但没有提供太多细节。
hydrate
的预期用途是什么?
renderToString
是同步的。它也无法处理重新渲染的组件,即当在初始渲染期间组件状态发生同步(即相同的滴答)更改并且应该触发额外的 render
调用时。示例是 Helmet,它需要 a workaround 才能将更改从嵌套 Helmet
传播回服务器端的顶级组件。
hydrate
和 renderToNodeStream
能否帮助避免 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
hydrate
有 landed to React 16,但尚未记录其使用。
This article 建议它应该与 renderToNodeStream
一起使用,但没有提供太多细节。
hydrate
的预期用途是什么?
renderToString
是同步的。它也无法处理重新渲染的组件,即当在初始渲染期间组件状态发生同步(即相同的滴答)更改并且应该触发额外的 render
调用时。示例是 Helmet,它需要 a workaround 才能将更改从嵌套 Helmet
传播回服务器端的顶级组件。
hydrate
和 renderToNodeStream
能否帮助避免 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