Next.js公式の「React Foundations」というチュートリアルの10章「Server and Client Components」が全く理解できなかったので、細かい用語をかみ砕きながらまとめてみる。
https://nextjs.org/learn/react-foundations/server-and-client-components
サーバーおよびクライアント環境
- サーバーとは、アプリケーションコードを保存し、クライアントからの要求を受信し、計算を実行し、適切な応答を返すデータ センター内のコンピューターを指します
- クライアントとは、ユーザーのデバイス上のブラウザのことです。アプリケーションコードへのリクエストをサーバーに送信し、サーバーから受信したレスポンスを、ユーザーが操作できるインターフェースに変換します
各環境には独自の機能と制約があります。例えば、レンダリングやデータ取得をサーバー側で行うことで、クライアントに送信するコード量を減らし、アプリケーションのパフォーマンスを向上させることができます。しかし、ユーザーインターフェースをインタラクティブにするには、クライアント側でDOMを更新する必要があります。
ネットワーク境界
ネットワーク境界は、サーバーとクライアントのコードを分ける概念的なラインです。Reactでは、コンポーネントツリー内でこの境界をどこに置くかを選択できます。例えば、ユーザーの投稿をサーバーでデータ取得した後レンダリング（コンピュータがコードやデータをもとにして、ユーザーに見える画面を作ること）し、各投稿に対するインタラクティブ（ユーザーが何かをしたときに、即座に反応があるUI）な「いいね」ボタンをクライアントでレンダリングすることができます。
バックグラウンドでは、コンポーネントは2つのモジュールグラフに分割されます。サーバーモジュールグラフ（またはツリー）には、サーバー上でレンダリングされるすべてのサーバーコンポーネントが含まれ、クライアントモジュールグラフ（またはツリー）にはすべてのクライアントコンポーネントが含まれます。
サーバーコンポーネントがレンダリングされた後、 React Server Component Payload (RSC)と呼ばれる特別なデータ形式がクライアントに送信されます。RSC ペイロードには以下のものが含まれます。
- サーバー コンポーネントのレンダリング結果
- クライアント コンポーネントをレンダリングする場所のプレースホルダーと、その JavaScript ファイルへの参照
React はこの情報を使用してサーバー コンポーネントとクライアント コンポーネントを統合し、クライアント上の DOM を更新します。
クライアントコンポーネントの使用
Next.js はデフォルトでサーバー コンポーネントを使用します。これは、アプリケーションのパフォーマンスを向上させるためであり、サーバー コンポーネントを導入するために追加の手順を実行する必要がないことを意味します。
ただし、useStateやuseEffectなどのクライアント専用のReactフックを使用する場合、これらはサーバーコンポーネント内では利用できません。そのため、インタラクティブな要素を含むコンポーネントは、クライアントコンポーネントとして定義する必要があります。