天天看點
傳回

談談 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：性能
談談 React 新出的 Server Components

例子很簡單，頁面中的三個元件應該如何請求資料？

  • 頂層元件通過 1 個接口 fetch 所有資料，這樣請求的時候會變長。使用者體驗✅ 可維護性❎ 性能❎
  • 頂層元件通過 3 個接口并行 fetch 所有資料：使用者體驗✅ 可維護性❎ 性能✅
  • 每個元件自行 fetch 資料：使用者體驗❎ 可維護性✅ 性能✅

面對種種痛點，我們也都有自己的方案。比如：

  • 我們可以通過增加伺服器配置來解決，或者優化後端代碼來解決。解決思路是讓接口響應變快。
  • 使用 graphql 按需查詢後端資料。
  • ……

React 團隊分析了導緻痛點的原因：元件需要反複從伺服器請求資料。而 React 團隊給出的解決方案是：把元件放到伺服器端，這樣用戶端和伺服器端隻需要往返一次。和 graphql 的思路很像，但是更加貼近 react 生态，也更加 frontend style。

我截取了視訊中的 30 秒，很好的說明了這種理念。

視訊推薦到react官網觀看，csdn無法上傳視訊：

https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

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":[["$","section",null,{"className":"col sidebar","children":[["$","section",null,{"className":"sidebar-header","children":[["$","img",null,{"className":"logo","src":"logo.svg","width":"22px","height":"20px","alt":"","role":"presentation"}],["$","strong",null,{"children":"React Notes"}]]}],["$","section",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"}]}]]}],["$","section","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 οnerrοr=alert(1)> 1 2 3 4 5 <form> <math><mtext> </form><form> <mglyph> <style></math><img src οnerrοr=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 還是挺期待的。

【react.js】
上一篇: iOS Blocks與Dispatch Queue的使用
下一篇: poj1915 BFS

繼續閱讀