什么是Server Component？
?React Server Components 目前 還處于RFC 的階段，現(xiàn)下只能透過實驗性發(fā)布的套件以及非常底層的 API 去使用，我們可以先做簡單的了解
?
解決什么問題
Dan 開門見山，丟出了我們業(yè)務(wù)開發(fā)中需要權(quán)衡三個點：體驗（user experience）、可維護性（maintenance）、性能（performance），然后用一個例子來說明為什么這三個點很難權(quán)衡。
這是一個很常見的組件化組合，問題在于每個組件都需要不同的數(shù)據(jù)，但是就體驗而言我們更希望這些組件的渲染盡量同時，而且如果關(guān)注性能的話，我們也會考慮并行的去 fetch 數(shù)據(jù)，于是我們通常會 fetch 邏輯放到頂層，然后通過 Props 或者 Context 傳遞下去。
這樣會把可維護性變差，除了看起來惡心，每個組件從邏輯上就不那么解耦了，我們于是會考慮每個組件自己處理 fetch 邏輯。
這又會讓體驗變差，因為瀏覽器從服務(wù)端 fetch 數(shù)據(jù)是比較貴的 IO，抽象一下就是下面這樣：
我們之所以需要從服務(wù)端 fetch 數(shù)據(jù)，是因為我們把所有渲染操作放到了客戶端，那如果我們把部分渲染邏輯放服務(wù)端呢？
于是就有了 React Server Components！
?總結(jié):Server Component解決的痛點就是
?
Server Component解決的痛點就是項目存在瀑布流請求，導(dǎo)致用戶體驗差，如果我們把組件放在服務(wù)端執(zhí)行，數(shù)據(jù)請求會非?？?/code>
Server Component一些注意點
容器組件才能在服務(wù)端執(zhí)行（Server端并不能處理交互，交互還是得交給客戶端處理），有交互和State狀態(tài)的組件只能跑在客戶端
Server Component傳遞到客戶端組件的數(shù)據(jù)，是可以經(jīng)過序列化的(用于網(wǎng)絡(luò)傳輸)( 比如已經(jīng)轉(zhuǎn)換好后的jsx)
Server Component是0 bundle，打包的時候不會被引入到客戶端 本地可以看到?jīng)]有Server端的文件
與SSR的區(qū)別，可以保持state狀態(tài)，之所以可以實現(xiàn)這種，因為返回的不是HTML，而是序列化的“指令”
Server Component和Suspense是互補的
6.Server Component和Suspense是互補的，Server Component是讓組件在服務(wù)端運行，這樣數(shù)據(jù)請求非?？?，Suspense是局部水合，可以形成互補
疑問點
我總感覺首次渲染后，后面只進行數(shù)據(jù)請求，不涉及序列化的“指令”（HTML的生成那樣），應(yīng)該是由客戶端客戶端進行接管，豈不是更好（比如我進行搜索）
接口返回的序列化的“指令” 這些數(shù)據(jù)我感覺挺大的啊
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","4",{"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"}]}]]}]
J4:["$","div",null,{"className":"notes-empty","children":["Couldn't find any notes titled \"1\"."," "]}]
J5:["$","div",null,{"className":"note","children":[["$","div",null,{"className":"note-header","children":[["$","h1",null,{"className":"note-title","children":"react"}],["$","div",null,{"className":"note-menu","role":"menubar","children":[["$","small",null,{"className":"note-updated-at","role":"status","children":["Last updated on ","9 Sep 2021 at 11:15 AM"]}],["$","@2",null,{"noteId":4,"children":"Edit"}]]}]]}],["$","div",null,{"className":"note-preview","children":["$","div",null,{"className":"text-with-markdown","dangerouslySetInnerHTML":{"__html":"<p>hello React Component</p>\n"}}]}]]}]
參考文獻
https://www.zhihu.com/question/435921124 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html Server Component視頻:https://youtu.be/TQQPAU21ZUw https://github.com/reactjs/server-components-demo rfc:https://github.com/reactjs/rfcs/blob/2b3ab544f46f74b9035d7768c143dc2efbacedb6/text/0000-server-components.md