Server Component(RSC)はブラウザではなくサーバー側、具体的にはNode.js環境で実行されるReact Componentです。Node.js APIに直接アクセスでき、そのJavaScript自体はブラウザへ送信されません。レンダリング結果はRSC Payloadという形式でクライアントに渡されます。
記事ではnode:fs/promisesを使ってサーバー側からファイルを読み込む例など、async/awaitによる非同期処理のコードが示されています。一方でServer ComponentはuseStateやuseEffect、イベントハンドラ、ブラウザ用APIを使えず、クライアント側の対話性が必要な部分をClient Componentとして定義するには"use client"ディレクティブが必要になります。
Pages Router時代のgetServerSidePropsはデータ取得がComponentから分離されていましたが、RSCではデータ取得がComponentに統合される点が大きな違いです。記事はSSRとRSCが別概念であることも重ねて強調しています。著者はRSC自体の開発者ではなく、実務でキャッチアップした個人の学習記録として書かれています。
出典が伝えている要点
- RSC（React Server Components）はクライアントではなくサーバー側の環境で実行されるReact Componentである
- RSCはブラウザではなくNode.js環境で実行される
- RSCはNode.js APIへ直接アクセスできる
- Server ComponentのJavaScriptはブラウザへ送信されない
- Server Componentのレンダリング結果はRSC Payloadという形式でクライアントに送られる
- 記事内でnode:fs/promisesを使いサーバー側でファイルを読み込むコード例が示されている
- Server Componentではasync/awaitを使用した非同期処理が可能である
- Client Componentを定義するには"use client"ディレクティブを使用する
- Pages Routerではデータ取得はgetServerSidePropsでComponentから分離されていたが、RSCではComponentにデータ取得が統合される
- 記事はSSRとRSCが異なる概念であることを強調している
- Server ComponentではuseState、useEffect、イベントハンドラを使用できない
- Server Componentはブラウザ用APIにアクセスできない
原文より
Server Componentそのものをブラウザで実行・hydrationする必要がないこと
出典: zenn.dev