前言

不久前React 18推出了第一个发布候选版本(18.0.0-rc.0)，意味着React 18的所有特性已经趋于稳定，可以投入到生产测试中。其中一个重要特性就是本文要介绍的Streaming SSR with Suspense。

服务端渲染（SSR）

首先，React的服务端渲染（Server side rendering）是怎么做的？

在用户访问时，React SSR（下图中的SSR with hydration一类）将React组件提前在服务器渲染成HTML发送给客户端，这样客户端能够在JavaScript渲染完成前展示基本的静态HTML内容，减少白屏等待的时间。

然后在JavaScript加载完成后对已有的HTML组件进行React事件逻辑绑定（也就是Hydration过程），Hydration完成后才是一个正常的React应用。
infographic.png
但是这类SSR同样存在弊端：

  • 服务端需要准备好所有组件的HTML才能返回。如果某个组件需要的数据耗时较久，就会阻塞整个HTML的生成。
  • Hydration是一次性的，用户需要等待客户端加载所有组件的JavaScript并Hydrated完成后才能和任一组件交互。（渲染逻辑复杂时，页面首次渲染到可交互之间可能存在较长的不可交互时间）
  • 在React SSR中不支持客户端渲染常用的代码分割组合React.lazy和Suspense。

而在React 18中新的SSR架构React Fizz带来了两个主要新特性来解决上述的缺陷：Streaming HTML（流式渲染）和Selective Hydration（选择性注水）

流式渲染（Streaming HTML）

一般来说，流式渲染就是把HTML分块通过网络传输，然后客户端收到分块后逐步渲染，提升页面打开时的用户体验。通常是利用HTTP/1.1中的分块传输编码（Chunked transfer encoding）机制。

renderToNodeStream

早在React 16中同样有一个用于流式传输的APIrenderToNodeStream来返回一个可读的流（然后就可以将这个流pipe给node.js的response流）给客户端渲染，比原始的renderToString有着更短的TFFB时间。

TFFB：Time To First Byte，发出页面请求到接收到应答数据第一个字节所花费的毫秒数

L3Byb3h5L2h0dHBzL2ltYWdlczIwMTguY25ibG9ncy5jb20vYmxvZy81OTYxNTcvMjAxODAzLzU5NjE1Ny0yMDE4MDMzMTE5MjA1NTcyNi0xMzk5MDIyMzIxLnBuZw==.png

  1. app.get("/", (req, res) => {
  2.   res.write("<!DOCTYPE html><html><head><title>Hello World</title></head><body>");
  3.   res.write("<div id='root'>"); 
  4.   const stream = renderToNodeStream(<App/>);
  5.   stream.pipe(res, { end: false });
  6.   stream.on('end', () => {
  7.     // 流结束后再写入剩余的HTML部分
  8.     res.write("</div></body></html>");
  9.     res.end();
  10.   });
  11. });

但是renderToNodeStream需要从DOM树自顶向下开始渲染，并不能等待某个组件的数据然后渲染其他部分的HTML（如下图的效果）。该API会在React 18中正式废弃。

renderToPipeableStream

而新推出renderToPipeableStream API则同时具备Streaming和Suspense的特性，不过在用法上更复杂。

  1. // react-dom/src/server/ReactDOMFizzServerNode.js
  2. // 类型定义
  4. type Options = {
  5.   identifierPrefix?: string,
  6.   namespaceURI?: string,
  7.   nonce?: string,
  8.   bootstrapScriptContent?: string,
  9.   bootstrapScripts?: Array<string>,
  10.   bootstrapModules?: Array<string>,
  11.   progressiveChunkSize?: number,
  12.   // 在至少有一个root fallback（Suspense中的）可以显示时被调用
  13.   onCompleteShell?: () => void,
  14.   // 在shell完成前报错时调用，可以用于返回别的结果            
  15.   onErrorShell?: () => void,
  16.   // 在完成所有等待任务后调用，但可能还没有flushed。              
  17.   onCompleteAll?: () => void,
  18.   onError?: (error: mixed) => void,
  19. };
  21. type Controls = {
  22.   // 取消等待中的I/O，切换到客户端渲染
  23.   abort(): void, 
  24.   pipe<T: Writable>(destination: T): T,
  25. };
  27. function renderToPipeableStream(
  28.   children: ReactNodeList,
  29.   options?: Options,
  30. ): Controls

这里以React官方给出的第一个Demo作为例子。

  1. import { renderToPipeableStream } from "react-dom/server";
  2. import App from "../src/App";
  3. import { DataProvider } from "../src/data";
  5. function render(url, res) {
  6.   // res为writable response流
  7.   res.socket.on("error", (error) => {
  8.     console.error("Fatal", error);
  9.   });
  10.   let didError = false;
  11.   const data = createServerData();
  12.   // 返回一个Writable Stream
  13.   const { pipe, abort } = renderToPipeableStream(
  14.     <DataProvider data={data}>
  15.       <App assets={assets} />
  16.     </DataProvider>,
  17.     {
  18.       bootstrapScripts: [assets["main.js"]],
  19.       onCompleteShell() {
  20.         // Stream传输之前设置正确的状态码
  21.         res.statusCode = didError ? 500 : 200;
  22.         res.setHeader("Content-type", "text/html");
  23.         pipe(res);
  24.       },
  25.       onErrorShell(x) {
  26.         // 错误发生时替换外壳
  27.         res.statusCode = 500;
  28.         res.send('<!doctype><p>Error</p>');
  29.       },
  30.       onError(x) {
  31.         didError = true;
  32.         console.error(x);
  33.       }
  34.     }
  35.   );
  36.   // 放弃服务端渲染，切换到客户端渲染.
  37.   setTimeout(abort, ABORT_DELAY);
  38. };

68747470733a2f2f717569702e636f6d2f626c6f622f5963474141416b314234322f704e6550316c4253546261616162726c4c71707178413f613d716d636f563745617955486e6e69433643586771456961564a52637145416f56726b39666e4e564646766361.png
以下截取自实际传输的HTML，最初被Suspense的Comment组件还没准备好，返回的只有占位的Spinner。每个被Suspense的组件都有一个对用户不可见的带注释和id的template占位符用来记录已传输状态的块（Chunks），这些占位符后续会被有效的组件填充。