谈谈 React 新出的 Server Components_justjavac(迷渡)

昨天看了 demo，今天翻了翻源码。我们应该从几个维度来“看待” React Server Components：

• 当前开发遇到了哪些痛点？

• 这些痛点目前有哪几种解决方案？

• Server Components 是怎么解决这些痛点的？

• Server Components 是否比这些解决方案更优秀？

• Server Components 是某一个或某几个解决方案的升级、颠覆还是互补？

而最常拿来和 Server Components 对比的就是传统的 PHP/ASP 技术和为框架而生的 SSR 技术。React Server Components 这个技术，听起来和 SSR 很像，而代码看起来则和 PHP 很像。很多人认为这是一种倒退，“前端好不容易爬到了山顶，却发现 PHP 已经等待多时”。其实恰恰相反，使用一种“和现有技术类似的”方式来解决某个开发痛点的做法，正是一种先进而优雅的方式。就好比 jsx 和 html 很相似，vue template 和 mustache 很相似，极低的减轻了开发者的学习成本。

虽然表面相似，但是却完全不同。

在 PHP/ASP 时代，页面都是由服务器来渲染。服务器接到请求后，查询数据库然后把数据“塞”到页面里面，最后把生成好的 html 发送给客户端。当用户点击链接后，继续重复上面的步骤。这样用户体验不是很好，每个操作几乎都要刷新页面，服务器处理完之后再返回新的页面。

我们可以概括为：

• 痛点：用户体验太差（user experience）

• 原因：页面总是刷新

• 解决思路：让页面别刷新

• 方案：使用 ajax

而 Angular/Vue/React 这种单页应用(SPA)则主要是客户端渲染。服务器接到请求后，把 index.html 以及 js/css/img 等发送给浏览器，浏览器负责渲染整个页面。后续用户操作和前面的 php/jquery 一样，通过 ajax 和后端交互。但是和 php 相比，第一次访问时只返回了什么内容都没有的 idnex.html 空页面，没法做 SEO。另一点就是页面需要等到 js/css 和接口都返回之后才能显示出来，首次访问会有白屏。

概括一下：

• 痛点：首次访问白屏

• 原因：首次访问只返回了 index.html 页面

• 解决思路：首次访问时返回渲染完的页面

• 方案：SSR

SSR 的方式是：首次访问的时候由服务器（通常是 Node.js）来渲染页面，然后把已经渲染好的 html 发送给浏览器。后续的用户操作依然通过 ajax 获取数据，然后在浏览器端渲染组件和页面。

那么能不能让首屏的体验更好呢？

• 痛点：SSR 首屏还是太慢

• 原因：服务端渲染是请求的接口太多，导致响应时间太长

• 解决思路：分块渲染，把已经渲染好的部分尽早的发送到浏览器

• 方案：bigPipe

我们根据这种思路重新审视一下 React Server Components 解决了什么问题。

在视频的开篇，Dan 就举了一个“鱼与熊掌不可兼得”的例子：

• Good：用户体验

• Cheap：可维护性

• Fast：性能

例子很简单，页面中的三个组件应该如何请求数据？

• 顶层组件通过 1 个接口 fetch 所有数据，这样请求的时候会变长。用户体验✅ 可维护性❎ 性能❎

• 顶层组件通过 3 个接口并行 fetch 所有数据：用户体验✅ 可维护性❎ 性能✅

• 每个组件自行 fetch 数据：用户体验❎ 可维护性✅ 性能✅

面对种种痛点，我们也都有自己的方案。比如：

• 我们可以通过增加服务器配置来解决，或者优化后端代码来解决。解决思路是让接口响应变快。

• 使用 graphql 按需查询后端数据。

• ……

React 团队分析了导致痛点的原因：组件需要反复从服务器请求数据。而 React 团队给出的解决方案是：把组件放到服务器端，这样客户端和服务器端只需要往返一次。和 graphql 的思路很像，但是更加贴近 react 生态，也更加 frontend style。

我截取了视频中的 30 秒，很好的说明了这种理念。

graphql 看似美好，但是落地困难。我使用 Gatsby 开发过几个项目，也做过 React Native 的 Facebook 登录，graphql 是真香。但是我觉得影响 graphql 落地的最大障碍就是 “明明是解决的前端痛点，却非要改造后端”。而把 graphql 做 BFF 来用坑也不少。

而 React Server Components 则完全是按 React 的思维来解决这个问题。甚至可以说是按前端组件化的思维来解决这个问题，这种思想 Vue 也可以实现。

前端发起请求，服务器端组件可以查询 db，可以访问接口 api，…… 而且和 SSR 不同，服务器响应的不是 html，而是一个序列化的“指令”。客户端根据此“指令”集来渲染组件和页面。

（PS：服务器直接返回 html 片段的技术也有了，叫 pjax/turbolinks。我去年和一个团队交流，说他们在做基于 React 组件的 pjax，后来放弃了）

M1:{"id":"./src/SearchField.client.js","chunks":["client5"],"name":""}
M2:{"id":"./src/EditButton.client.js","chunks":["client1"],"name":""}
S3:"react.suspense"
J0:["$","div",null,{"className":"main","children":[["$","p",null,{"className":"col sidebar","children":[["$","p",null,{"className":"sidebar-header","children":[["$","img",null,{"className":"logo","src":"logo.svg","width":"22px","height":"20px","alt":"","role":"presentation"}],["$","strong",null,{"children":"React Notes"}]]}],["$","p",null,{"className":"sidebar-menu","role":"menubar","children":[["$","@1",null,{}],["$","@2",null,{"noteId":null,"children":"New"}]]}],["$","nav",null,{"children":["$","$3",null,{"fallback":["$","div",null,{"children":["$","ul",null,{"className":"notes-list skeleton-container","children":[["$","li",null,{"className":"v-stack","children":["$","div",null,{"className":"sidebar-note-list-item skeleton","style":{"height":"5em"}}]}],["$","li",null,{"className":"v-stack","children":["$","div",null,{"className":"sidebar-note-list-item skeleton","style":{"height":"5em"}}]}],["$","li",null,{"className":"v-stack","children":["$","div",null,{"className":"sidebar-note-list-item skeleton","style":{"height":"5em"}}]}]]}]}],"children":"@4"}]}]]}],["$","p","94",{"className":"col note-viewer","children":["$","$3",null,{"fallback":["$","div",null,{"className":"note skeleton-container","role":"progressbar","aria-busy":"true","children":[["$","div",null,{"className":"note-header","children":[["$","div",null,{"className":"note-title skeleton","style":{"height":"3rem","width":"65%","marginInline":"12px 1em"}}],["$","div",null,{"className":"skeleton skeleton--button","style":{"width":"8em","height":"2.5em"}}]]}],["$","div",null,{"className":"note-preview","children":[["$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}}],["$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}}],["$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}}],["$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}}],["$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}}]]}]]}],"children":"@5"}]}]]}]
M6:{"id":"./src/SidebarNote.client.js","chunks":["client6"],"name":""}
J4:["$","ul",null,{"className":"notes-list","children":[["$","li","94",{"children":["$","@6",null,{"id":94,"title":"Untitled feng","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"feng test"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitled feng"}],["$","small",null,{"children":"6:21 AM"}]]}]}]}],["$","li","93",{"children":["$","@6",null,{"id":93,"title":"Untitled","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"Null"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitled"}],["$","small",null,{"children":"6:06 AM"}]]}]}]}],["$","li","92",{"children":["$","@6",null,{"id":92,"title":"TEST","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"DDD"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"TEST"}],["$","small",null,{"children":"6:06 AM"}]]}]}]}],["$","li","90",{"children":["$","@6",null,{"id":90,"title":"测试测试","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"测试测试测试测试测试测试测试测试测试测试测试测试测试测试"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"测试测试"}],["$","small",null,{"children":"5:49 AM"}]]}]}]}],["$","li","89",{"children":["$","@6",null,{"id":89,"title":"喵喵喵🐱","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"喵喵喵🐱"}],["$","small",null,{"children":"5:43 AM"}]]}]}]}],["$","li","88",{"children":["$","@6",null,{"id":88,"title":"Untitled","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"？？？？"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitled"}],["$","small",null,{"children":"5:32 AM"}]]}]}]}],["$","li","87",{"children":["$","@6",null,{"id":87,"title":"test03","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"hahah hahah ahahha"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"test03"}],["$","small",null,{"children":"5:32 AM"}]]}]}]}],["$","li","86",{"children":["$","@6",null,{"id":86,"title":"求不要更新了, 老子学不动了","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"求不要更新了, 老子学不动了"}],["$","small",null,{"children":"5:30 AM"}]]}]}]}],["$","li","84",{"children":["$","@6",null,{"id":84,"title":"Untitled","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"</math><img src onerror=alert(1)> 1 2 3 4 5 <form> <math><mtext> </form><form> <mglyph> <style></math><img src onerror=alert(1)>"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitled"}],["$","small",null,{"children":"3:24 AM"}]]}]}]}],["$","li","83",{"children":["$","@6",null,{"id":83,"title":"Hi,I am Lilei","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"console.log(process)"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Hi,I am Lilei"}],["$","small",null,{"children":"5:07 AM"}]]}]}]}],["$","li","81",{"children":["$","@6",null,{"id":81,"title":"到此一游","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"123123123123"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"到此一游"}],["$","small",null,{"children":"3:23 AM"}]]}]}]}],["$","li","80",{"children":["$","@6",null,{"id":80,"title":"Untitled","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"asdasdad"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitled"}],["$","small",null,{"children":"2:32 AM"}]]}]}]}],["$","li","78",{"children":["$","@6",null,{"id":78,"title":"alert(123)","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"alert(123)"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"alert(123)"}],["$","small",null,{"children":"2:30 AM"}]]}]}]}],["$","li","77",{"children":["$","@6",null,{"id":77,"title":"; DROP TABLE *; --","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"; DROP TABLE *; --"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"; DROP TABLE *; --"}],["$","small",null,{"children":"2:30 AM"}]]}]}]}],["$","li","76",{"children":["$","@6",null,{"id":76,"title":"Untitled","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"STRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS TESTSTRESS..."}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitled"}],["$","small",null,{"children":"2:23 AM"}]]}]}]}],["$","li","75",{"children":["$","@6",null,{"id":75,"title":"🐂🍺","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"🐂🍺"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"🐂🍺"}],["$","small",null,{"children":"2:15 AM"}]]}]}]}],["$","li","74",{"children":["$","@6",null,{"id":74,"title":"1111","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"1111"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"1111"}],["$","small",null,{"children":"2:07 AM"}]]}]}]}],["$","li","73",{"children":["$","@6",null,{"id":73,"title":"我真帅","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"我真帅"}],["$","small",null,{"children":"1:59 AM"}]]}]}]}],["$","li","72",{"children":["$","@6",null,{"id":72,"title":"😲这还可以当讨论区吗","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"太顶了？？ 可以的吧 不可以"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"😲这还可以当讨论区吗"}],["$","small",null,{"children":"5:46 AM"}]]}]}]}],["$","li","71",{"children":["$","@6",null,{"id":71,"title":"Untitled111","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitled111"}],["$","small",null,{"children":"1:59 AM"}]]}]}]}],["$","li","70",{"children":["$","@6",null,{"id":70,"title":"111","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"1111111"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"111"}],["$","small",null,{"children":"1:49 AM"}]]}]}]}],["$","li","69",{"children":["$","@6",null,{"id":69,"title":"Cheap, Good, Fast~ It's the best","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"yes"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Cheap, Good, Fast~ It's the best"}],["$","small",null,{"children":"2:07 AM"}]]}]}]}],["$","li","68",{"children":["$","@6",null,{"id":68,"title":"There is no silver bullet","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"没有银弹"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"There is no silver bullet"}],["$","small",null,{"children":"4:22 AM"}]]}]}]}],["$","li","66",{"children":["$","@6",null,{"id":66,"title":"Dan Abramov is the 🐐gfasdfasdfasdf","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"👍asdfasdfasdfasdfasdfasdfasdf那段时低年级"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Dan Abramov is the 🐐gfasdfasdfasdf"}],["$","small",null,{"children":"1:58 AM"}]]}]}]}],["$","li","65",{"children":["$","@6",null,{"id":65,"title":"ss","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"ss"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","64",{"children":["$","@6",null,{"id":64,"title":"Untitledsx","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"这个是一个默认页面"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitledsx"}],["$","small",null,{"children":"12:09 midnight"}]]}]}]}],["$","li","62",{"children":["$","@6",null,{"id":62,"title":"This is","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"#Surprisingly Slow"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"This is"}],["$","small",null,{"children":"4:20 AM"}]]}]}]}],["$","li","61",{"children":["$","@6",null,{"id":61,"title":"Yekshimesh","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"my name a borat!"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Yekshimesh"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","60",{"children":["$","@6",null,{"id":60,"title":"Elon Musk","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"https://twitter.com/elonmusk is the best"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Elon Musk"}],["$","small",null,{"children":"2:00 AM"}]]}]}]}],["$","li","59",{"children":["$","@6",null,{"id":59,"title":":-)","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":":)"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":":-)"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","57",{"children":["$","@6",null,{"id":57,"title":"Readme","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"React Server Components Demo What is this? When will I be able to use this? Setup DB Setup Step 1...."}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Readme"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","56",{"children":["$","@6",null,{"id":56,"title":"HGV great","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"HGV great"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","55",{"children":["$","@6",null,{"id":55,"title":"HGV just tesing!","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"Hello, world!"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"HGV just tesing!"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","54",{"children":["$","@6",null,{"id":54,"title":"Hello","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"Hello??"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Hello"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","53",{"children":["$","@6",null,{"id":53,"title":"holyshit find another job","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"holyshit find another job"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"holyshit find another job"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","52",{"children":["$","@6",null,{"id":52,"title":"狗子们又要学新东西啦","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"狗子们又要学新东西啦 Really interesting."}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"狗子们又要学新东西啦"}],["$","small",null,{"children":"1:22 AM"}]]}]}]}],["$","li","51",{"children":["$","@6",null,{"id":51,"title":"å†…å·å·æ­»ä½ ","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"å†…å·å·æ­»ä½ "}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"å†…å·å·æ­»ä½ "}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","50",{"children":["$","@6",null,{"id":50,"title":"HI","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"测试测试知乎小弟留"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"HI"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","49",{"children":["$","@6",null,{"id":49,"title":"又有新概念啦","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"又有新概念啦"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"又有新概念啦"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","48",{"children":["$","@6",null,{"id":48,"title":"From Vietnam","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"theuranuskjkj #fdfdf dfdsf dfdsfds 地方就乐山大佛 对方水电费"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"From Vietnam"}],["$","small",null,{"children":"3:49 AM"}]]}]}]}],["$","li","47",{"children":["$","@6",null,{"id":47,"title":"; DROP TABLE *; --","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"'); DROP TABLE *; --"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"; DROP TABLE *; --"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","46",{"children":["$","@6",null,{"id":46,"title":"Hello React Server Compoenents","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Hello React Server Compoenents"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","44",{"children":["$","@6",null,{"id":44,"title":"Why there are no loading indicators?","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"If I click on some notes, it freezes for a bit and only then transitions to the needed page. But..."}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Why there are no loading indicators?"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","42",{"children":["$","@6",null,{"id":42,"title":"Untitledasd","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitledasd"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","41",{"children":["$","@6",null,{"id":41,"title":"Youtube","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"Oh no! What have I done? FR Rechercher Image d'avatar 55:56 / 57:19 Data Fetching with React Server Components 17..."}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Youtube"}],["$","small",null,{"children":"2:49 AM"}]]}]}]}],["$","li","39",{"children":["$","@6",null,{"id":39,"title":"Dupa","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"z trupa hmmm this is nice"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Dupa"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","38",{"children":["$","@6",null,{"id":38,"title":"Untitledd","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"dddd"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitledd"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","37",{"children":["$","@6",null,{"id":37,"title":"New Note","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"it's a bit slow?"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"New Note"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","35",{"children":["$","@6",null,{"id":35,"title":"Untitled","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"Hello"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"Untitled"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","34",{"children":["$","@6",null,{"id":34,"title":"q121Untitled","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"sadasdasd"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"q121Untitled"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","2",{"children":["$","@6",null,{"id":2,"title":"test","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":"India"}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"test"}],["$","small",null,{"children":"12/22/20"}]]}]}]}],["$","li","1",{"children":["$","@6",null,{"id":1,"title":"测试下","expandedChildren":["$","p",null,{"className":"sidebar-note-excerpt","children":["$","i",null,{"children":"(No content)"}]}],"children":["$","header",null,{"className":"sidebar-note-header","children":[["$","strong",null,{"children":"测试下"}],["$","small",null,{"children":"12/22/20"}]]}]}]}]]}]
J5:["$","div",null,{"className":"note","children":[["$","div",null,{"className":"note-header","children":[["$","h1",null,{"className":"note-title","children":"Untitled feng"}],["$","div",null,{"className":"note-menu","role":"menubar","children":[["$","small",null,{"className":"note-updated-at","role":"status","children":["Last updated on ","23 Dec 2020 at 6:21 AM"]}],["$","@2",null,{"noteId":94,"children":"Edit"}]]}]]}],["$","div",null,{"className":"note-preview","children":["$","div",null,{"className":"text-with-markdown","dangerouslySetInnerHTML":{"__html":"<p>feng test</p>\n"}}]}]]}]

所以本质上还是客户端渲染。视频中小姐姐还演示了一个例子：点击左侧内容时组件使用到了过渡效果，就如同普通的 React 程序一样，完全不受服务器端组件的影响。

Server Components 的这种思路还有很大的挖掘空间。比如可以开发 WebSocket Components，通过 WebSocket 向浏览器主动的实时推送“指令”。再比如可以开发 Native Components，在 App 内嵌的 H5 页面中向原生代码发请求，原生代码完成业务处理后返回给 H5 序列化的“指令”。

这种序列化的指令还可以被存储，可以被回放，可以被 mock，调试起来应该可以像 redux 一样具有时间旅行功能。

总之，对 Server Components 还是挺期待的。