我的编程空间,编程开发者的网络收藏夹
学习永远不晚

React SSR架构Stream Rendering与Suspense for Data Fetching源码分析

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

React SSR架构Stream Rendering与Suspense for Data Fetching源码分析

这篇“React SSR架构Stream Rendering与Suspense for Data Fetching源码分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“React SSR架构Stream Rendering与Suspense for Data Fetching源码分析”文章吧。

前言

假设我们的业务背景如下:

React SSR架构Stream Rendering与Suspense for Data Fetching源码分析

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

我们先来看下传统的 SSR (服务端获取到所有接口数据后调用 renderToString 渲染出内容返回给前端,同时在页面中插入全局的 INITIAL_STATE 供客户端注水)和基于 Stream Rendering & Suspense for Data Fetching (以下简称 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 class="lazy" data-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 SSR架构Stream Rendering与Suspense for Data Fetching源码分析”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

React SSR架构Stream Rendering与Suspense for Data Fetching源码分析

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

React SSR架构Stream Rendering与Suspense for Data Fetching源码分析

这篇“React SSR架构Stream Rendering与Suspense for Data Fetching源码分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完
2023-07-05

React SSR架构Streaming Render与Selective Hydration源码分析

本文小编为大家详细介绍“React SSR架构Streaming Render与Selective Hydration源码分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“React SSR架构Streaming Render与Selec
2023-07-05

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录