React 新概念 — Server Components

  • 什麼是 React Server Components?
  • React Server Components 解決了什麼問題?
  • React Server Components 跟 Server-Side Rendering 的差別
  • React Server Components 的缺點
  • 要如何試用 React Server Components?

什麼是 React Server Components?

Server Components 是一種新型態的 Components 類型,以往我們所熟悉的 Components 現在則是可以被稱為 Client Components。

from Data Fetching with React Server Components

React Server Components 解決了什麼問題?

因為 Server Components 在 Server 上 render ,Components 的程式碼 Bundle 不需要下載到 Client,也連帶著可以去避開下載只有 Server Components 會用到的套件。在 Facebook 公司內部進行的少量實驗中,特定頁面的 Bundle Size 已經有 30% 的下降。

React Server Components 跟 Server-Side Rendering 的差別

因為同樣是跟 Server 有關,讓這兩個概念特別容易搞混,所以這邊來說明一下兩者的分別。

React Server Components 的缺點

雖然上面有提到一些 Server Components 的優點,但缺點也是不少。

如何試用 React Server Components?

React Server Components 目前還處於 RFC 的階段,現下只能透過實驗性發布的套件以及非常底層的 API 去使用。

總結

雖然 Server Components 這個做法跟過去所推崇的前後端分離有點不太一致,但從解決 Waterfall 請求跟大幅減少 Bundle Size 的方向來說,這或許對於非常需要提升效能的服務來說還是一個很值得研究的方向。

--

--

Architect @ Dcard. Author of Electron React Boilerplate and Bottender. JavaScript Developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
C.T. Lin

C.T. Lin

540 Followers

Architect @ Dcard. Author of Electron React Boilerplate and Bottender. JavaScript Developer.