React Server Componentはどうレンダリングされるのか。

公式ドキュメントをもとに Next.js 環境で React Server Component がどうレンダリングされるのかを調べてみる。

コンポーネントとレンダリングの基本

「コンポーネント」

コンポーネントは基本的にデータを引数として受け取り、JSXを返すJavaScript関数です。引数として受け取るデータはProps、内部的なデータは Stateで管理します。

「レンダリング」

コンポーネント関数が呼び出されて返したJSXがBabelを通じてReact Element (JavaScript オブジェクト) にトランスパイルされます。この React Element は DOM に表現するための情報を含んでいるオブジェクトであり、Fiber に拡張されて Virtual DOM のノードとなります。

まとめると、コンポーネントレンダリングとは

コンポーネント呼び出しから
React Element 生成
Fiber を経てVirtual DOM が構成され
実際の DOM をアップデート

する一連の過程を意味します。

従来の React での「コンポーネント」は一つしかなかったのですが、後ほど概念が拡張された「サーバーコンポーネント」の登場により、従来のコンポーネントがクライアント（ブラウザー）でレンダリングされることで「クライアントコンポーネント」と呼んでいる理解で良いでしょう。

サーバーコンポーネントのレンダリング過程

Next.js でサーバーコンポーネントがレンダリングされる過程は大きくサーバーとクライアントで順次に行われます。

Server-Side Steps

Next.js のレンダリング作業は React API を利用して Route Segments と Suspense Boundaries で分割された Chunks 単位で行われます。

Step 1：RSC（React Server Component） Payload の生成

React はサーバーコンポーネントを RSC Payload という特別なデータフォーマットでレンダリングします。 RSC Payload はサーバーコンポーネントツリーをクライアントで構成し、ブラウザの DOM をアップデートするのに必要なバイナリ形式の表現であり、以下の3つの要素が含まれます。

サーバーコンポーネントのレンダリング結果
クライアントコンポーネントのプレースホルダー（クライアントコンポーネントがどこにレンダリングされるかの空白表示）、該当コンポーネントの JavaScript ファイルへの Reference 情報
サーバーコンポーネントがクライアントコンポーネントに渡す Props

Step 2：HTML 生成・RSC Payload の準備

Next.js は React が生成した RSC Payload とクライアントコンポーネントの JavaScript のかたまりを活用して HTML をレンダリングします。ここで重要な点はクライアントコンポーネントコードの一部、例えば useState の初期値などがまるでサーバーコンポーネントがスタティック HTML を渡すようにすでにサーバーで HTML に含まれうるということです。HTML と RSC Payload が準備されるとクライアントに転送される準備が整います。

Client-Side Steps

Step 1：HTML Preview

クライアント（ブラウザー）はサーバーから受け取った HTML を即座に画面に表示します。これは Next.js が該当ルートのプレビューとして HTML をすぐに提供するということです。ユーザーはこの段階でページの骨組みを素早く見ることができます。プレビューの表示はページの初回ロード時にのみ発生し、その後のクライアントサイドルーティング（Next.js の Link など）時には HTML ではなく別の方法でデータを取得します。

* Network タブで確認できる HTML Previewの例（公式ドキュメント）

Step 2：Reconciliation

HTML が表示された後、クライアントはサーバーから共に受け取った RSC Payload を使用して Reconciliation 段階を経ます。この段階では、クライアントコンポーネントツリーとサーバーコンポーネントツリーを RSC Payload に基づいて照合する作業が行われます。RSC Payload に含まれるクライアントコンポーネントの「プレースホルダー」情報をもとにどのクライアントコンポーネントが来るべきかを把握し、React コンポーネントツリー、すなわち Vitual DOM を構成します。必要であればこの過程で実際の DOM アップデートも行われます。

Step 3：Hydration

Reconciliationが完了して Vitual DOM が構成されると、最後にハイドレーション段階に進みます。この段階の核心はインタラクションが可能になることです。サーバーで HTML 生成時に使用して残ったクライアントコンポーネントの JavaScript ファイル（イベントハンドラーなどが含まれている）を持ってきてコンポーネントに繋ぎます。