转载自：魔术师卡颂 公众号

12月21日，React团队颁布了一个新的提案Server Components。

随同这个提案同时收回的，还有一个小时的视频解说、可供运行的Demo、详尽的介绍。

可见，React团队很器重这个提案。本文会从如下方面解说：

  • Server Components是什么
  • Server Components解决了什么问题

ServerComponent是什么

一句话概括：

Server Components是在服务端运行的React组件。

咦？这和服务端渲染（SSR）有什么区别？

相比SSR将组件在服务端渲染成填充内容的HTML字符串，并在客户端hydrate后应用。Server Components更像咱们的在客户端写的一般组件一样，只不过他的运行环境是服务端。

咱们能够将组件依照性能分为：

  • 提供数据的容器组件
  • 渲染数据并提供数据交互的交互组件

举个例子，Note组件是容器组件，他负责申请并缓存数据。NoteEditor是渲染note数据并执行用户交互的交互组件。

function Note(props) {  const [note, setNote] = useState(null);  useEffect(() => {    fetchNote(props.id).then(noteData => {      setNote(noteData);    });  }, [props.id]);    if (note == null) {    return "Loading";  } else {    return <NoteEditor note={note}/>  }}

如例子所述，咱们能够通过在useEffect中发动申请并将返回的数据保留在state中。

这种「申请-渲染」模式会遇见被称为waterfall的问题：

就像一节一节的瀑布往下流水，NoteEditor须要期待Note申请note胜利后能力开始渲染。

当交互组件依赖的数据源越多，waterfall问题会更显著。

实践上，如果React足够聪慧，就能在服务端执行容器组件的渲染逻辑，在客户端执行交互组件的渲染逻辑。

依照这样的理念，如下这棵齐全在客户端渲染的组件树：

能够拆分为：在服务端运行的容器组件和在客户端运行的交互组件。

其中在服务端运行的容器组件就是Server Component。

ServerComponent的意义

既然ServerComponent在服务端运行，人造更靠近各种IO（申请数据库、读取文件、缓存...）。

下面的例子齐全能够间接从数据库获取note数据，同时借助Suspense，采纳同步的写法。

function Note(props) {  const note = db.notes.get(props.id);  if (note == null) {    return "Loading";  }  return <NoteEditor note={note}/>}

人造更靠近后端

任何其余数据源只须要通过React提供的API简略封装，使其反对Suspense，就能接入ServerComponent中。人造更靠近后端。

解决waterfall

区别于SSR传输的HTML字符串。ServerComponent会将Note组件及其从IO申请到的数据序列化为相似JSX的数据结构，以流的模式传递给前端：

客户端在运行时间接获取到填充了数据的流，并借助Concurrent Mode执行流式渲染。

0打包体积

假如咱们开发一款MD编辑器。服务端传递给前端MD格局的字符串。

咱们须要在前端引入将MD解析为HTML字符串的库。这个库就有206k。

import marked from 'marked'; // 35.9K (11.2K gzipped)import sanitizeHtml from 'sanitize-html'; // 206K (63.3K gzipped)function NoteWithMarkdown({text}) {  const html = sanitizeHtml(marked(text));  return (/* render */);}

通过ServerComponent咱们怎么解决这个问题呢？

只须要简略将NoteWithMarkdown标记为ServerComponent，将引入并解析MD这部分逻辑放在服务端执行。

ServerComponent并不会减少前端我的项目打包体积。这个例子中，一次性为咱们缩小了前端206K (63.3K gzipped)的打包体积以及解析MD的工夫。

主动代码宰割

通过应用React.lazy能够实现组件的动静import。之前，这须要咱们在切换组件/路由时手动执行。在ServerComponent中，都是主动实现的。

在下面动图中，左侧列表是ServerComponent，当点击其中卡片时，组件对应数据会动静加载。

更好的ahead-of-time (AOT)优化

Vue作为一门应用模版语言的框架，模版语言的固定写法使其能在编译时针对模版内容作出优化。

因为JSX仅仅是JS的语法糖，React很难在编译时做出优化。

ServerComponent对组件提出了更多限度（不能应用useState、useEffect...）。这些限度从侧面为AOT提供更多优化线索。

ServerComponent的应用

上面咱们通过改写一个记事本组件解说ServerComponent的应用：

// Note.js import fetchData from './fetchData'; import NoteEditor from './NoteEditor';function Note(props) {  const {id, isEditing} = props;  const note = fetchData(id);    return (    <div>      <h1>{note.title}</h1>      <section>{note.body}</section>      {isEditing         ? <NoteEditor note={note} />        : null      }    </div>  );}

Note组件的次要性能是依据props传入的id申请对应的note数据。

NoteEditor用于展现及批改note。

其中fetchData办法用于获取数据，数据的加载中状态由组件外的Suspense实现。

能够看到，交互局部由NoteEditor实现，Note次要性能是获取并传递数据。

接下来咱们将Note变为ServerComponent。

// 留神????// Note.server.js - Server Component// 留神????import db from 'db.server'; // 留神????import NoteEditor from './NoteEditor.client';function Note(props) {  const {id, isEditing} = props;  const note = db.posts.get(id);    return (    <div>      <h1>{note.title}</h1>      <section>{note.body}</section>      {isEditing         ? <NoteEditor note={note} />        : null      }    </div>  );}

有3点须要留神的改变，咱们顺次理解下：

  1. Note.js文件名改为Note.server.js代表这是Server Component。
  2. Note.server.js运行于服务端，咱们不须要客户端的fetchData办法，能够间接拜访数据库，所以这里调用db.server提供的办法
  3. NoteEditor用于展现及批改note。这是由客户端用户的交互管制的，所以将文件名改为NoteEditor.client代表这是个Client Component。

总结

太阳底下没有新鲜事。晚期前端交互简略，仅仅作为服务端的View层。

随着前端交互变简单，呈现了前端框架主导的客户端渲染（CSR）。

为了解决首屏渲染速度、SEO问题，呈现了服务端渲染（SSR），又回到了已经作为View层的终点，只不过管制的粒度更细。

ServerComponent提案的呈现，预示着React的长远目标：将对View层的管制细化到组件级别。

为什么是「长远目标」？ServerComponent落地的大前提是Concurrent Mode生产环境稳固，让咱们一起期待2021年吧。

参考资料

[1] 视频解说: https://www.youtube.com/watch...

[2] Demo: https://github.com/pomber/ser...