複数回に分けてReact Server Componentについて学んでいきます。
今回は@player_Mokeがお送りします。
次回はこちら👉【React Server Components】公式ドキュメント 'use client' を初学者と一緒に読み解く
サーバーコンポーネントとは？
サーバーコンポーネントは、ブラウザに送るJavaScriptを減らし、
初期表示のパフォーマンス改善につながる仕組みです。
ブラウザはJavaScriptが送られてきた際、以下の動作を行う必要があります。
- ダウンロード
- 読み込み
- 解析
- 実行
そのため、送られてくるJavaScriptが多いほど、
ブラウザ側で「表示するための準備」が増え、負荷が大きくなります。
サーバーコンポーネントは、このような問題を改善するための仕組みです。
サーバーコンポーネントは、Reactの新しいタイプのコンポーネントで、
ブラウザではなく、サーバー側やビルド時に実行されます。
ブラウザへ送る前にReactコンポーネントからHTMLを生成し、
完成済みのHTMLを返すことができるため、ブラウザの処理を減らせます。
なぜRSC(React Server Components)が必要か
RSCが必要とされるようになった背景
従来のReactでは、useEffectを使ってデータを取得するのが一般的な方法でした。
しかしこの方法では、画面を表示した後にデータ取得が始まるため、ユーザーが実際のコンテンツを見るまでに待ち時間が発生します。
これはReact公式ドキュメントでも効率面での課題として触れられています。
本来はページアクセス時にサーバー側でデータを取得し、データを含んだHTMLを生成できるのが理想です。
一方で、useEffectを利用したデータ取得では以下のような流れになります。
データ取得が必要なページでは、
- JavaScriptのダウンロード
- JavaScriptの実行
- データ取得のためのAPI通信
を経て初めてコンテンツが表示されることになるため、表示までに時間がかかるという課題があります。
RSCではサーバー側でデータ取得を行なった後にHTMLを生成できるため、
ユーザーはより早い段階で実際のコンテンツを確認できるようになります。
このように、データ取得や画面生成をサーバー側で行えるようになり、
ブラウザ側の負荷を減らせる仕組みとしてRSCが登場しました。
サーバーコンポーネントの種類
サーバーコンポーネントはサーバーを使用するものと使用しないもので種類が分かれます。
それらの使い分けとしては以下のようなものが考えられます。
-
静的なものを扱いたいとき
- ①サーバを使用しないサーバコンポーネントを使用
-
動的なものを扱いたいとき
- ②サーバを使用するサーバコンポーネントを使用
①サーバを使用しないサーバコンポーネント(ビルド時のみに実行するパターン)
サーバーコンポーネントはWebサーバがなくても、ビルド時にReactのコードを実行してブラウザに表示するHTMLを作ることができます。
そのためファイルシステムの読み取りや静的なコンテンツの取得も可能なので、
お知らせや、利用規約、ブログ記事など、表示中に内容が変化しないページに向いています。
使用例：CMS(記事や画像などを管理するシステム)から静的にデータを読み取り、ビルド時にHTMLを生成する
サーバーコンポーネントの有無による違い
例：ページの表示期間中に変化しない静的なコンテンツをレンダーしたい場合
「サーバーコンポーネントなしの場合」
重いライブラリをページのレンダーのためだけに追加でダウンロードし、
さらにロード後に別リクエストがデータをフェッチしてくるのを待つ必要がある。
「サーバーコンポーネントありの場合」
ビルド時に一度だけレンダーすれば良いため、
レンダリングのためだけに使用する重いライブラリをブラウザへ送らずに済む
=>画面の表示が速くなる
②サーバを使用するサーバコンポーネント(リクエスト時に実行するパターン)
①サーバを使用しないサーバコンポーネントでは、ビルド時に一度だけ実行すれば良いので、常にサーバーがある必要はないという話をしていました。
クライアントコンポーネントのみでデータ取得を行う場合、通常はブラウザからAPIへリクエストを経由する必要があります。
一方でサーバーありのサーバーコンポーネントを使用することで、APIを構築することなく、
直接DBやバックエンドへアクセスできるようになります。
それがこの②サーバを使用するサーバコンポーネントです。
これを使うと、ユーザーの入力内容によって変わる情報や最新情報を扱いたいページを作る際も、サーバー側でデータ取得とレンダリングをまとめて行うことができます。
サーバーコンポーネントの有無による違い
例：マイページ画面を開く場合
多くのサービスのマイページでは、次のような複数の情報を組み合わせて1つの画面を表示することがあります。
このようなページでは、ユーザーごとに異なる情報や最新情報を取得する必要があるため、サーバーを使用するサーバーコンポーネントが活用できます。
「サーバーコンポーネントなしの場合」
サーバーコンポーネントがない場合、
ブラウザからAPIを呼び出して必要な情報を取得し、
その結果をもとに画面を組み立てる必要があります。
それだけでなく、取得したデータをもとにブラウザ側で画面をレンダリングする必要があります。
そのため、ブラウザ側で実行するJavaScriptが増え、初期表示までの負荷が大きくなる場合があります。
「サーバーコンポーネントありの場合」
サーバーコンポーネントを使うことで、サーバー側でデータ取得とレンダリングを行えます。
そのため、画面表示のためだけに用意していたAPIを減らせる場合があります。
参考ページ