React Server Componentsについてのメモガキ

概要

Reactの最新機能の1つであるReact Server Componentsについてのメモを書き置く。

React Server Componentsとは

React Server Components（以下RSC）とは、Reactコンポーネントをサーバー側でレンダリングして構築済みのHTMLを返す仕組み。

今までのSSRと違うのか？

Reactコンポーネントをサーバー側でレンダリングしてHTMLを返すというのは同じ。

コンポーネントが実行できる環境が既存のSSRの場合はサーバー側・クライアント側双方だったがRSCの場合はサーバー側のみ実行できる。

また、今までは同期間数でしかコンポーネントを書くことができなかったが、非同期関数として書くことができるようになった。

今までのReactコンポーネントとの違い

Server Componentとと対比して今までのコンポーネントはClient Componentと言われる。

table:table

内容 Server Component Client Component

実行できる場所 サーバー側のみ サーバー側・クライアント側

コンポーネントを書ける関数 非同期関数でも書ける 同期間数のみ

ブラウザでのハイドレーション ない ある

クリックなどのイベント処理 使えない 使える

ブラウザAPIの扱い 使えない 使える

useState等の一部hook 使えない 使える

何が嬉しいのか

サーバー側のみで実行されるため、DBからのデータ取得などサーバー側のみで実行されるべき処理が書きやすくなる

クライアント側で実行するJSコードを持つ必要が無いためバンドルサイズが少なくなる

初回読み込み時にJSをダウンロードし解析し実行するという流れが必要なくなり、初回描画速度が向上する

ユーザー操作をどう実現するか

前述の通りユーザ操作などインタラクティブな動きはブラウザ側のみで実行できるRSCでは実現できない。

そのためサーバー側関数を実行する「Server action」かブラウザでも実行できるコンポーネントである「Client Component」を使用する必要がある。

Server action

WIP

Client Component

今までのコンポーネントと同じようにクライアント側でも実行できるコンポーネント。

これに関しては今までと同じように書くだけ

関連リンク