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

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

RFC:
https://github.com/reactjs/rfcs/pull/188

ServerとClientの見分け方:
https://github.com/reactjs/rfcs/pull/189

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

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

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ならコンポーネントごとのサーバーサイドでのフェッチも簡単にできる、みたいな。

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