React SSR架构Streaming Render与Selective Hydration解析

更新时间：2023年03月27日 10:55:38 作者：Aaaaaaaaaaayou

这篇文章主要为大家介绍了React SSR架构Streaming Render与Selective Hydration解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

React 团队在这篇文章中介绍了 React 18 SSR 的新架构，主要用于解决之前 SSR 的几个问题：

必须获取到所有数据以后，才能返回内容
必须加载到所有 JS 代码后，才能开始进行注水
必须等整个应用注水完成后，才能开始进行交互

所以 React 团队提出了用流式渲染（Streaming Render）和选择性注水（Selective Hydration）来分别解决第一个和其他两个问题。

Streaming Render

以下 Demo 使用的 react 及 react-dom 版本为 16.14.0

假设我们有如下应用：

import React from 'react'
const Item = () => {
  const start = Date.now()
  // 人为增加该组件的渲染时间
  while (Date.now() - start < 2) {}
  return <li>a</li>
}
const App = () => {
  return (
    <ul>
      List:
      {[...new Array(3700)].map((_, i) => {
        return <Item />
      })}
    </ul>
  )
}
export default App

我们使用 renderToString 来进行服务端渲染：

app.get('/string', async (req, res) => {
  const markup = renderToString(<App />)
  res.end(`
    <!DOCTYPE html>
      <html>
        <head>
          <title>Demo</title>
          <style>
            li {
              display: inline-block;
            }
          </style>
        </head>
        <body>
          <div id="root">${markup}</div>
        </body>
      </html>
    `)
})

通过浏览器访问，可以看到需要等待比较长的时间页面才显示出所有内容：

我们换成 renderToNodeStream 再试一试：

app.get('/node_stream', (req, res, next) => {
  res.write(`<!DOCTYPE html>
      <html>
        <head>
          <title>Demo</title>
          <style>
            li {
              display: inline-block;
            }
          </style>
        </head>
        <body>
          <div id="root">`)
  const stream = renderToNodeStream(<App />)
  stream.pipe(res, {end: false})
  stream.on('end', () => {
    res.write(`</div>
          </body>
        </html>`)
    res.end()
  })
})

可以看到浏览器中先显示了一部分内容，然后才显示所有内容：

这样，当用户访问一个大型的 React 页面时，可以让其尽早地看到一部分内容，从而提供一个比较好的用户体验。

其原理主要是利用了 http 的 Transfer-Encoding: chunked 响应头。

那么，React 每次返回多少内容呢？通过断点调试可以知道，这个值是 16 KB。但是实际返回的长度可能会略大于 16 KB，因为 React 总是会完整的返回标签，比如 </li>，而不是拆成两部分 </ 和 li>。

为了能够让开发更好的控制流式渲染每次返回的内容，我们可以结合 Suspense，但是由于 16 版本不支持 SSR 使用 Suspense，所以接下来我们换成 v18.2.0 继续我们的实验。

假设我们有如下应用，期待的效果是用户先看到 List:Loading，4 秒后显示 List:a。

import React, {Suspense} from 'react'
const Item = ({index}) => {
  return 'a'
}
const Comp = React.lazy(
  () =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({default: Item})
      }, 4000)
    })
)
const App = () => {
  return (
    <ul>
      List:
      <Suspense fallback='Loading'>
        <Comp />
      </Suspense>
    </ul>
  )
}
export default App

我们先用 renderToNodeStream 试试，可以看到，页面并没有像我们所期待的那样，而是一开始显示空白，4 秒后才显示 List:a，这实际上已经失去 Streaming Render 的功能了，所以这个函数在 React 18 中被标记为了 deprecated，使用 renderToPipeableStream 来替代。更多详情请见 Upgrading to React 18 on the server。

我们换成 renderToPipealbeStream 就可以看到我们期望的效果了：

其原理也很简单，第一次返回的内容为：

<ul>
  List:<!--$?--><template id="B:0"></template
  >Loading<!--/$-->
</ul>

第二次返回的内容为：

<div hidden id="S:0">a<!-- --></div>
<script>
  function $RC(a, b) {
    a = document.getElementById(a)
    b = document.getElementById(b)
    b.parentNode.removeChild(b)
    if (a) {
      a = a.previousSibling
      var f = a.parentNode,
        c = a.nextSibling,
        e = 0
      do {
        if (c && 8 === c.nodeType) {
          var d = c.data
          if ('/$' === d)
            if (0 === e) break
            else e--
          else ('$' !== d && '$?' !== d && '$!' !== d) || e++
        }
        d = c.nextSibling
        f.removeChild(c)
        c = d
      } while (c)
      for (; b.firstChild; ) f.insertBefore(b.firstChild, c)
      a.data = '$'
      a._reactRetry && a._reactRetry()
    }
  }
  $RC('B:0', 'S:0')
</script>

其中 <script> 中的代码主要功能是将 <template id="B:0"></template>Loading 用 <div hidden id="S:0"> 中的内容来替换。

这样，React 不用等待整个应用的数据全部准备好才开始返回 HTML 内容给用户了，从而解决了第一个问题：“必须获取到所有数据以后，才能返回内容”。

Selection Hydration

以下 Demo 使用的 react 及 react-dom 版本为 18.2.0

我们改写一下我们的例子，来看看 React 是怎么解决第二个问题的：

import React, {Suspense} from 'react'
const Comp = React.lazy(() => import('./Item')) // Item.js 是一个非常大的文件，大于 600 KB
const App = () => {
  return (
    <ul>
      <Suspense fallback='Loading...'>
        <Comp />
      </Suspense>
      <button
        style={{position: 'absolute', top: '10px', zIndex: '1'}}
        onClick={() => window.alert('click!')}>
        Click Me
      </button>
    </ul>
  )
}
export default App

这个例子中 Item.js 会被单独打包成一个 chunk，我们仍然使用 renderToPipeableStream 来进行渲染，可以看到在 Item.js 这个 chunk 加载完成前，button 已经完成了注水：

这样，第二个问题：“必须加载到所有 JS 代码后，才能开始进行注水” 也解决了。

为了说明第三个问题，我们先准备一下我们的 Demo：

// App.js
import React, {Suspense} from 'react'
const Comp = React.lazy(() => import('./ExpensiveComp'))
const Button = React.lazy(() => import('./Button'))
const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading Comp!</div>}>
        <Comp />
      </Suspense>
      <Suspense fallback={<div>Loading Button!</div>}>
        <Button />
      </Suspense>
    </div>
  )
}
export default App
// ExpensiveComp.js
import React from 'react'
const ExpensiveComp = () => {
  return (
    <ul>
      {[...new Array(5)].map((_, i) => (
        <Item key={i} index={i} />
      ))}
    </ul>
  )
}
const Item = ({index}) => {
  const start = Date.now()
  while (Date.now() - start < 1000) {}
  return <li>Item ${index}</li>
}
export default ExpensiveComp
// Button.js
import React from 'react'
const Button = () => {
  return (
    <button
      onClick={() => {
        window.alert('click button!')
      }}>
      Button
    </button>
  )
}
export default Button

然后，我们在 react-dom 代码中加入一句调试的代码：

function hydrateInstance(instance, type, props, rootContainerInstance, hostContext, internalInstanceHandle, shouldWarnDev) {
  console.log('hydrateInstance-precacheFiberNode', internalInstanceHandle, instance)
  ...

正常情况下，React 的注水过程如图所示：

但实际上，我们可以在 button 未注水完成时就点击：

是不是这样感觉有点奇怪？按照我们平时的理解，“注水”的一个重要作用就是给元素绑定事件，但是这里还未“注水”完成却可以响应事件。其秘诀还是在于 react 的事件委托机制，这里暂时先不讨论其原理。

2023-03-08 更新：第三个问题的说明有误，应该是点击 button 打断了 Comp 组件的注水过程，让 React 优先对 Button 组件进行注水。

总结

从上面的几个例子来看，解决这些问题都离不开 Suspense 这个组件，毫无疑问这是未来一个非常重要的组件，值得后续认真研究一下。

以上就是React SSR架构Streaming Render与Selective Hydration解析的详细内容，更多关于React SSR架构解析的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

react echarts刷新不显示问题的解决方法
最近在写项目的时候遇到了一个问题,当编辑完代码后echarts图正常展示 , 可再次刷新页面 , echarts会消失,所以本文给大家介绍了react echarts刷新不显示问题原因和解决方法,需要的朋友可以参考下
2024-02-02
React使用react-sortable-hoc如何实现拖拽效果
这篇文章主要介绍了React使用react-sortable-hoc如何实现拖拽效果问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
React Native第三方平台分享的实例（Android，IOS双平台）
本篇文章主要介绍了React Native第三方平台分享的实例（Android，IOS双平台），具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
React组件的三种写法总结
本文主要总结了React组件的三种写法以及最佳实践，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
React Native 的动态列表方案探索详解
这篇文章主要为大家介绍了React Native 的动态列表方案探索示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
记一个React.memo引起的bug
memo可以自己决定是否更新，但它是一个函数组件而非一个类，本文主要介绍了React.memo引起的bug，具有一定的参考价值，感兴趣的可以了解一下
2022-03-03
浅谈React前后端同构防止重复渲染
这篇文章主要介绍了浅谈React前后端同构防止重复渲染，首先解释React前后端同构、React首屏渲染的概念。然后通过这2个概念解决服务端渲染完成后浏览器端重复渲染的问题。有兴趣的可以了解一下
2018-01-01
React Native中原生实现动态导入的示例详解
在React Native社区中,原生动态导入一直是期待已久的功能,在这篇文章中,我们将比较静态和动态导入,学习如何原生地处理动态导入,以及有效实施的最佳实践,希望对大家有所帮助
2024-02-02
React 项目中动态设置环境变量
本文主要介绍了React 项目中动态设置环境变量，本文将介绍两种常用的方法，使用 dotenv 库和通过命令行参数传递环境变量，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
react底层的四大核心内容架构详解
这篇文章主要为大家详细介绍了react四大核心内容架构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03