流暢なReact

第9章. React Serverコンポーネント

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前章では、Reactフレームワークの世界に飛び込み、特にNext.jsとRemixに焦点を当てた。抽象化の利点、開発をスピードアップする規約、よくある問題に対する包括的な解決策、生産性向上への全体的な影響など、そもそもフレームワークを使う理由を探った。

私たちはRemixとNext.jsの実装の詳細を掘り下げ、独自のベアボーンフレームワークを実装することで、類似の問題を解決するためにそれぞれのフレームワークが取る共通のアプローチを示し、React Server Components (RSCs) を完全に取り入れたNext.jsのサーバファーストの方向性を示した。

RSCといえば、Reactアプリケーションのパフォーマンス、効率、ユーザ体験を向上させるために設計された、Reactエコシステムの興味深いトレンドである。この先進的なアプリケーションアーキテクチャは、サーバでレンダリングされるマルチページアプリ（MPA）とクライアントでレンダリングされる SPA の長所を組み合わせ、パフォーマンスや保守性を犠牲にすることなく、シームレスなユーザ体験を提供する。この章では、RSCが機能するための中核概念、利点、基本的なメンタルモデルとメカニズムについて説明する。最新情報については、react.devを常に参照すること。

RSC は、サーバ側で「実行」され、クライアント側の JavaScript バンドルからは除外される新しいタイプのコンポーネントを導入する。これらのコンポーネントはビルド時に実行され、ファイルシステムからの読み取り、静的コンテンツの取得、データレイヤーへのアクセスを可能にする。サーバコンポーネントからブラウザのインタラクティブなクライアントコンポーネントにpropsとしてデータを渡すことで、RSCは非常に効率的でパフォーマンスの高いアプリケーションを維持する。

では、サーバ・コンポーネントはどのように機能するのだろうか？これをもう少し忠実に理解するために、サーバ・コンポーネントとは何かをもう少し深く掘り下げてみよう。

先ほど説明したように、サーバ・コンポーネントとは、サーバだけで実行される特殊化コンポーネントである。これをよりよく理解するために、ReactコンポーネントとはReact要素を返す関数に過ぎないことを思い出してみよう：

const Component = () => <div>hi!</div>;

このスニペットでは、Component は<div>hi!</div> を返す関数である。もちろん、<div>hi!</div> は別のReact要素を返す。Reactの< は、React.createElement のエイリアスだからだ。これは第2章のJSXで説明した。最終的に、すべてのコンポーネントはReact要素を返す。

サーバコンポーネントも同様である。Component 、サーバでもクライアントでも実行されると、vDOMを返す。第3章では、React要素が以下のスキーマを持つJavaScriptオブジェクトにすぎないことを説明した：

{
  $$typeOf: Symbol("react.element"),
  type: () => ({
    $$typeOf: Symbol("react.element"),
    type: "div",
    props