Open
11

React Server Componentの情報と考察が集まるスクラップ

Server Componentは、サーバーサイドで先に描画されるコンポーネント。
クライアントに送られるときはただのintrinsic elementsに見える。

一回だけ描画されるのでステートを持たない。useStateuseEffectは使えない。

SSRと違う点

SSRはサーバーサイドとクライアントで同じコンポーネントツリーを作るが、Server Componentはそうではない。

Server Componentはクライアントのバンドルに含まれないのでSSRに比べてバンドルサイズの削減が期待できる。

FAQを見る限りServer ComponentsとSSRの併用は可能そう。

Server ComponentはReact単体の機能ではなく、バンドラーなどを巻き込んだシステムを作ろうとしている。

In our bundler plugins we'll enforce that a .server.js file cannot be imported in that environment.

First, they make code splitting automatic: Server Components treat all imports of Client Components as potential code-split points.

Server Components: (snip) May render other Server Components, native elements (div, span, etc), or Client Components.

Server Componentの利点

  • 重いdependencyが必要な部分だけserver-sideで描画することでクライアントのバンドルサイズを削減できる。(SSRはserver-sideとclient-sideで同じコンポーネントツリーを再現する必要があるので無理)

  • サーバーサイドのデータに依存したコンポーネントを比較的安全に書ける。(*.server.tsxなどのようにファイル名で明示することでそのようなコンポーネントをクライアントサイドで利用することに対してlintをかけられる)

Server Componentを使うとコンポーネントごとのSSRを簡単に実現できるんですかね。

現状だと基本的にルートのコンポーネントでPropsを取得して(Next.jsならgetServerSideProps)、子コンポーネントにPropsを渡していく書き方になると思うのですが、Server Componentならコンポーネントごとのサーバーサイドでのフェッチも簡単にできる、みたいな。

動画の最初に挙げられていた問題意識も「各コンポーネントがそれぞれクライアントからフェッチすると遅い」だったので。

Server ComponentがDBアクセスするみたいな例もあったので、できると思います。
ただ、そういうのは一般に非同期処理なのでConcurrent Modeとも思うのですが、そのあたりの兼ね合いがまだ自分もよく分かっていないですね。Server Componentがサスペンドしたら何がクライアントに送られるのかとか...

https://youtu.be/TQQPAU21ZUw?t=1999

ここ(33:50あたり)に Concurrent Mode のデモがありますが、サスペンスしたら fallback がクライアントに即座に返されるようです。
さらに、その間コネクションは切れず、解決した結果がストリームされていくようです。
これぞ求めていた Concurrent Mode ……!!

どういう仕組みなのか分かりませんが、これができるのはすごいですね。そこまで手を出してConcurrent Mode対応入れてくるとは……

ログインするとコメントできます