React SSR架构Stream Rendering与Suspense for Data Fetching

更新时间：2023年03月27日 14:02:16 作者：Aaaaaaaaaaayou

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

前言

之前写过一篇文章介绍了 React 18 SSR 新架构，今天继续基于此架构实战一下。假设我们的业务背景如下：

我们的页面分为两大块，上面部分是个人介绍，依赖接口 /api/profile （耗时约 3s），下面部分是文章列表，依赖接口 /api/list（耗时约 6s）。其中文章列表的业务逻辑非常重，代码体积很大，依赖的接口比较慢。

我们先来看下传统的 SSR （服务端获取到所有接口数据后调用 renderToString 渲染出内容返回给前端，同时在页面中插入全局的 INITIAL_STATE 供客户端注水）和基于 Stream Rendering & Suspense for Data Fetching （以下简称 Stream SSR）两者的效果对比：

传统 SSR	Stream SSr

首先，我们来对比下从用户发起请求到用户看到内容这个阶段。传统 SSR 用户看到的都是一个空白页面，一直要等到最耗时的 /api/list 接口返回用户才能看到内容。而 Stream SSR 有以下几点的提升：

在页面内容返回前有 loading 的提示
Profile 的内容先处理完，先返回，没有被 List 阻塞

同样的，注水过程也是如此。传统 SSR 需要等到 JS 加载完后，统一对整个应用进行注水。而 Stream SSR 则先完成了 Profile 的注水。

那么，要怎么实现这样的效果呢？接下来让我们 step by step。或者直接看代码。

React SSR Stream Rendering & Suspense for Data Fetching 实践

Stream Rendering

首先，为了实现 Stream Rendering，我们需要使用 renderToPipeableStream，假设我们有如下 HTML 模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SSR + MicroFrontend</title>
  </head>
  <body>
    <div id="app1"><!-- app1 --></div>
    <script crossorigin src="http://localhost:8080/dist/client.js"></script>
  </body>
</html>

则我们可以按如下方式进行返回：

app.get('/', async (req, res) => {
  const [heal, tail] = html.split('<!-- app1 -->')
  const stream = new Writable({
    write(chunk, _encoding, cb) {
      res.write(chunk, cb)
    },
    final() {
      res.end(tail)
    },
  })
  const {pipe} = renderToPipeableStream(<App />, {
    onShellReady() {
      res.statusCode = 200
      res.write(head)
      pipe(stream)
    },
  })
})

看着有点奇怪是吧，这是因为 renderToPipeableStream 的返回不再是 Node.js 中的 ReadableStream 对象，无法监听 end 事件。所以这里通过一个中间的 Writable 对象来转接数据，并监测渲染流的结束。

Stream Rendering 的部分搞定了，接下来我们看看 Data Fetching 部分。

Suspense for Data Fetching

在这篇文章曾经提到过结合 Suspense 做 Data Fetching，但是之前是自己实现的一个简单的请求工具，为了更贴近实际，这次使用 react-query。则组件中可以按照如下方式来请求数据：

async function getList() {
  const rsp = await fetch('http://localhost:9000/api/list')
  const data = await rsp.json()
  return data
}
const List = () => {
  const query = useQuery(['list'], getList)
  return (
    <ul>
      {query.data.map((item) => (
        <li key={item.name}>{item.name}</li>
      ))}
    </ul>
  )
}

在使用该组件的时候，可以用 Suspense 包裹起来，以便于数据返回前用户可以看到一个 loading 的效果：

const App = () => {
  return (
    <div>
      <Suspense fallback={<p>Loading List...</p>}>
        <List />
      </Suspense>
      ...
    </div>
  )
}

同时为了减少入口文件的体积，我们通过异步的方式来引入 List 这个比较大的组件：

const List = React.lazy(() => import('./List'))

类似的，Profile 组件也可以按照同样的方式来处理。

这样，Stream Rendering & Suspense for Data Fetching 基本上算是实现了。不过现在还有个问题，对于每个组件，我们会分别在服务端和客户端都请求一次接口。正确的做法应该是只在服务端请求一次，然后服务端返回 HTML 的时候把接口数据也一并带上，作为 CSR 的初始数据。

React Query 官网中有介绍 SSR 相关的内容，但是跟传统的 SSR 没什么区别，也是要等到数据都获取完后，才开始渲染：

 function handleRequest (req, res) {
   const queryClient = new QueryClient()
   await queryClient.prefetchQuery('key', fn)
   const dehydratedState = dehydrate(queryClient) // 得到一个接口请求的全局状态
   const html = ReactDOM.renderToString(
     <QueryClientProvider client={queryClient}>
       <Hydrate state={dehydratedState}>
         <App />
       </Hydrate>
     </QueryClientProvider>
   )
   res.send(`
     <html>
       <body>
         <div id="root">${html}</div>
         <script>
           window.__REACT_QUERY_STATE__ = ${JSON.stringify(dehydratedState)};
         </script>
       </body>
     </html>
   `)
   queryClient.clear()
 }

这样的做法有几个缺点：

整个应用的渲染都被阻塞了，原本可以更早返回的 Profile 也被推迟了
必须要知道当前页面渲染所需要调用的所有接口，当页面很复杂且由多人维护时这个代码就很不好维护了

下面我们来解决这些问题，最终的方案我称之为“全局状态动态更新”方案。

全局状态动态更新

从上面的代码可以知道，通过 dehydrate(queryClient) 可以得到一个全局的对象用来描述当前请求得到的数据，那我们是不是可以在组件里面每次有数据获取到时就来更新一下这个对象呢？就像这样：

const query = useQuery(['data'], getList)
const ee = useContext(EventEmitterContext)
if (ee && query.data) {
  ee.emit('updateState')
}

然后我们在处理请求的回调函数中监听这个事件，更新全局状态：

  const templateDOM = new JSDOM(`
<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  </head>
  <body>
    <div id="app1"><!-- app1 --></div>
    <script id="reactQueryState">window.__REACT_QUERY_STATE__ = ${JSON.stringify(
      dehydratedState
    )};</script>
    ...
  </body>
</html>
`)
...
ee.on('updateState', () => {
  const dehydratedState = dehydrate(queryClient)
  templateDoc.querySelector(
    '#reactQueryState'
  ).innerHTML = `window.__REACT_QUERY_STATE__ = ${JSON.stringify(
    dehydratedState
  )};`
})

这样我们就做到了仍然流式的返回内容给用户，并在这个过程中不停的更新全局数据，最后返回给客户端，而且也不需要了解这个页面渲染所需要的所有接口，即保证了用户体验，又没有丢失代码的可维护性。

React 团队一直在提高用户体验、代码可维护性和性能这些方面进行不停的探索，感觉不久的将来前端的开发方式又要被他们改变了，看来前端还没有死，还能继续折腾。

以上就是React SSR架构Stream Rendering与Suspense for Data Fetching的详细内容，更多关于React SSR架构的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解在React项目中安装并使用Less（用法总结）
这篇文章主要介绍了详解在React项目中安装并使用Less（用法总结），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
React 数据共享useContext的实现
本文主要介绍了React 数据共享useContext的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
深入理解React Native核心原理(React Native的桥接（Bridge)
这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接（Bridge),本文重点给大家介绍React Native的基础知识及实现原理，需要的朋友可以参考下
2021-04-04
react native与webview通信的示例代码
本篇文章主要介绍了react native与webview通信的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
React Native 中实现倒计时功能
这篇文章主要介绍了React Native中实现倒计时功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
react 页面加载完成后自动执行标签的点击事件的两种操作方法
这篇文章主要介绍了react 页面加载完成后自动执行标签的点击事件,本文给大家分享两种操作方法结合示例代码给大家讲解的非常详细，需要的朋友可以参考下
2022-12-12
React Fragment介绍与使用详解
本文主要介绍了React Fragment介绍与使用详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
React路由规则定义与声明式导航及编程式导航分别介绍
这篇文章主要介绍了React路由规则的定义、声明式导航、编程式导航，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
使用React SSR写Demo一学就会
这篇文章主要为大家介绍了使用React SSR写Demo实现教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
详解React中传入组件的props改变时更新组件的几种实现方法
这篇文章主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09