React?SSR架構(gòu)Streaming?Render與Selective?Hydration解析

更新時(shí)間：2023年03月27日 10:55:38 作者：Aaaaaaaaaaayou

這篇文章主要為大家介紹了React?SSR架構(gòu)Streaming?Render與Selective?Hydration解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

React 團(tuán)隊(duì)在這篇文章中介紹了 React 18 SSR 的新架構(gòu)，主要用于解決之前 SSR 的幾個(gè)問題：

必須獲取到所有數(shù)據(jù)以后，才能返回內(nèi)容
必須加載到所有 JS 代碼后，才能開始進(jìn)行注水
必須等整個(gè)應(yīng)用注水完成后，才能開始進(jìn)行交互

所以 React 團(tuán)隊(duì)提出了用流式渲染（Streaming Render）和選擇性注水（Selective Hydration）來分別解決第一個(gè)和其他兩個(gè)問題。

Streaming Render

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

假設(shè)我們有如下應(yīng)用：

import React from 'react'
const Item = () => {
  const start = Date.now()
  // 人為增加該組件的渲染時(shí)間
  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 來進(jìn)行服務(wù)端渲染：

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>
    `)
})

通過瀏覽器訪問，可以看到需要等待比較長的時(shí)間頁面才顯示出所有內(nèi)容：

我們換成 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()
  })
})

可以看到瀏覽器中先顯示了一部分內(nèi)容，然后才顯示所有內(nèi)容：

這樣，當(dāng)用戶訪問一個(gè)大型的 React 頁面時(shí)，可以讓其盡早地看到一部分內(nèi)容，從而提供一個(gè)比較好的用戶體驗(yàn)。

其原理主要是利用了 http 的 Transfer-Encoding: chunked 響應(yīng)頭。

那么，React 每次返回多少內(nèi)容呢？通過斷點(diǎn)調(diào)試可以知道，這個(gè)值是 16 KB。但是實(shí)際返回的長度可能會(huì)略大于 16 KB，因?yàn)?React 總是會(huì)完整的返回標(biāo)簽，比如 </li>，而不是拆成兩部分 </ 和 li>。

為了能夠讓開發(fā)更好的控制流式渲染每次返回的內(nèi)容，我們可以結(jié)合 Suspense，但是由于 16 版本不支持 SSR 使用 Suspense，所以接下來我們換成 v18.2.0 繼續(xù)我們的實(shí)驗(yàn)。

假設(shè)我們有如下應(yīng)用，期待的效果是用戶先看到 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，這實(shí)際上已經(jīng)失去 Streaming Render 的功能了，所以這個(gè)函數(shù)在 React 18 中被標(biāo)記為了 deprecated，使用 renderToPipeableStream 來替代。更多詳情請(qǐng)見 Upgrading to React 18 on the server。

我們換成 renderToPipealbeStream 就可以看到我們期望的效果了：

其原理也很簡單，第一次返回的內(nèi)容為：

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

第二次返回的內(nèi)容為：

<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"> 中的內(nèi)容來替換。

這樣，React 不用等待整個(gè)應(yīng)用的數(shù)據(jù)全部準(zhǔn)備好才開始返回 HTML 內(nèi)容給用戶了，從而解決了第一個(gè)問題：“必須獲取到所有數(shù)據(jù)以后，才能返回內(nèi)容”。

Selection Hydration

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

我們改寫一下我們的例子，來看看 React 是怎么解決第二個(gè)問題的：

import React, {Suspense} from 'react'
const Comp = React.lazy(() => import('./Item')) // Item.js 是一個(gè)非常大的文件，大于 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

這個(gè)例子中 Item.js 會(huì)被單獨(dú)打包成一個(gè) chunk，我們?nèi)匀皇褂?renderToPipeableStream 來進(jìn)行渲染，可以看到在 Item.js 這個(gè) chunk 加載完成前，button 已經(jīng)完成了注水：

這樣，第二個(gè)問題：“必須加載到所有 JS 代碼后，才能開始進(jìn)行注水” 也解決了。

為了說明第三個(gè)問題，我們先準(zhǔn)備一下我們的 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

然后，我們?cè)?react-dom 代碼中加入一句調(diào)試的代碼：

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

正常情況下，React 的注水過程如圖所示：