対象読者
- 新バージョンでReactを体験してみたい方
- すでにReact開発に従事していて、新機能を知りたい方
- Reactの最新動向を追っておきたい方
なお、本記事はReact 18で導入された「トランジション」や「Suspense」に関して基本知識があることを前提としています。
前提環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
- Ubuntu 22.04
- React 19.0.0
- Node.js v22.7.0
- Next.js 15.1.4
- Google Chrome 130.0.6723.92
サンプルコードを実行するには、サンプルのフォルダーでnpm installコマンドを実行してライブラリーをダウンロード後、npm run buildでビルドし、npm startコマンドを実行してください。その後、Webブラウザーで https://localhost:3000 を開いてください。本記事内では抜粋して説明するので、それ以外の実装は各サンプルコードを参照してください。
React Server Componentsの正式サポート（1）
React 19の大きなトピックとして、React Server Componentsのサポートが挙げられます。これまでは実験的機能で、Next.jsが先行して導入している状況でしたが、React 19で正式に取り入れられました。クライアントサイドのレンダリングをベースに考えられてきた従来のReactからは一線を画す、大きなパラダイムシフトになります。
詳しい説明に入る前に用語の整理をしておきましょう。「React Server Components」はReactに新しく導入された概念です。この中には「サーバコンポーネント」と「サーバ関数」のサポートと付随するディレクティブが含まれています。階層で表すと以下のようになります。
-
React Server Components（RSC）
- サーバコンポーネント（Server Components）
- サーバ関数（Server Functions）
-
ディレクティブ（
"use client"、"use server"）
「React Server Components」の中にさらに「サーバコンポーネント」が含まれるため分かりづらいのですが、以下、混同を避けるために「React Server Components」は「RSC」と略して表記します。またReact公式ページの表記にならい、「Server」を「サーバ」と表記します。
なお、執筆時点でRSCをプロダクトレベルで使えるフレームワークはNext.js（App Router）のみであり、開発時は必然的にこれを選択することになるため、本記事のサンプルでもNext.jsを採用しています。また、現状でNext.jsの開発を始める場合はTypeScriptを使うことが多いと思いますので、サンプルもTypeScriptとしています。
React Server Componentsのディレクティブ
まず、RSCで追加された2種類の重要なディレクティブについて説明します。ディレクティブは、モジュールや関数をマークするための特別なコメントのようなものです。モジュール（ファイル）に記載する場合はimportよりも前に記述します。
クライアントコンポーネントをマークする"use client"ディレクティブ
RSCを利用するフレームワークでは、コンポーネントは既定で「サーバコンポーネント」（後述）として扱われます（※）。クライアントで使用するコンポーネントは"use client"をファイルの冒頭に記述して、「クライアントコンポーネント」としてマークします。
「クライアントコンポーネント」とは、要するに従来のReactコンポーネントのことで、useStateなどのフックを使って、インタラクティブなUIを提供できるコンポーネントのことです。
※RSCを導入していないフレームワークやviteでビルドするReactプロジェクトの場合は、React 19でも従来通りクライアントコンポーネントとして扱われます。RSCを取り入れるかどうかはフレームワーク次第のようです。
"use client"ディレクティブでマークされたコンポーネント（およびその配下のコンポーネント）は、クライアントバンドル（JavaScript）に含まれるようになります。つまりクライアントコンポーネントが多ければ多いほど、クライアント側に転送・実行されるコード量が増えるということになります。
クライアントコンポーネントからインポートしたコンポーネントもクライアントコンポーネントとして扱われることに注意が必要です。バンドルサイズを抑えるためには、クライアントコンポーネントをなるべく少なく保つことが重要です。
サーバ関数をマークする"use server"ディレクティブ
"use server"ディレクティブは後述する「サーバ関数」をマークする際に使用します。このディレクティブが付加された関数はサーバ関数として扱われ、サーバコンポーネントやクライアントコンポーネントから呼び出せるようになります。
"use server"ディレクティブは関数単位のほか、ファイル全体に対して指定できますが、クライアントコンポーネントからインポートする場合は、ファイル全体に対して指定しなければなりません。
ややこしいのですが"use server"はサーバ関数をマークするものであり、サーバコンポーネントをマークするディレクティブではありません。サーバコンポーネントにはディレクティブは必要ありません。
