React 19とNext.jsのServer Actions

Server Actions は、ブラウザーではなくサーバー上で実行される非同期関数です。ファイルの先頭または関数本体の先頭に 'use server' ディレクティブを記述して指定します。これにより、この関数がクライアント側では決して実行されないことをフレームワークに伝えます。

Server Actionsはサーバー上で実行されるため、データベース接続、環境変数のシークレット、セッションデータ、ファイルシステムリソースなど、サーバーのコンテキスト全体にアクセスできます。これは、ブラウザーが公開する情報にしかアクセスできないクライアントコンポーネントとは根本的に異なります。

クライアントコンポーネントがServer Actionを呼び出すと、Next.jsは特別なRSCエンドポイントに対してHTTP POSTリクエストを自動的に送信します。引数のシリアライズやトランスポート層はフレームワークがすべて処理するため、これらのミューテーションのためにfetch()呼び出しを手動で記述する必要はありません。

Server Actionsを使うと、多くのミューテーション処理でAPI Routeが不要になります。Action自体がエンドポイントになるため、ロジックをサーバー関数として一度定義し、ローカル関数であるかのようにクライアントコンポーネントから直接呼び出せます。

Server Actionsは当初Next.js固有の概念でしたが、React 19ではReactの第一級機能に昇格しました。これにより、Next.js以外のバンドラーやフレームワークでも、Reactの仕様に従って同じパターンを実装できます。

Server ActionsはReact 19 RCでは実験的な機能ですが、導入当初からNext.js 14以降のApp Routerでは安定版として提供されています。現在Next.js App Routerで本番アプリケーションを構築する場合、Server Actionsは完全にサポートされている推奨パターンです。

Server Actionsの最も重要なセキュリティ特性の1つは、シークレットがブラウザーに届かないことです。Server Action内で使用するデータベースのパスワードやAPIキーなどの環境変数がクライアントバンドルに含まれることはありません。関数本体がブラウザーに送信されないためです。

HTMLのフォーム要素では、action属性を使ってServer Actionを直接指定できます：<form action={myServerAction}>。Reactがフォーム送信をインターセプトし、フォームデータを使ってServer Actionを呼び出すため、クライアント側のJavaScriptによる処理を組み立てなくてもサーバー側でミューテーションを実行できます。

Server Actionが実行されると、ReactはActionの引数をPOSTリクエストのボディにシリアライズします。サーバーはそれらをデシリアライズして関数を実行し、戻り値をシリアライズして返します。境界を越えて受け渡せるのは、シリアライズ可能な値（文字列、数値、配列、プレーンオブジェクト）だけです。

ファイルの先頭に'use server'を記述し、モジュールレベルでServer Actionを定義できます。または、Server Component内でasync関数の先頭に'use server'を記述してインラインで定義することもできます。どちらの方法でも、サーバー上でのみ呼び出せる関数が作成されます。

クライアントコンポーネントでは、通常のasync関数と同じようにServer Actionsをインポートして呼び出せます。呼び出し構文はローカルのasync関数を呼び出す場合と同じですが、実行はすべてサーバー上で行われます。この抽象化により、クライアントコンポーネントをすっきり保ち、fetchの定型コードをなくせます。

次のうち、Server Actionsのセキュリティモデルを最も適切に説明しているものはどれですか。

Server Actionsは、'use server'でマークされたasyncのサーバー側関数です。データベース接続や環境変数のシークレットなど、サーバーコンテキストを利用できます。HTTP通信はNext.jsが自動的に処理し、React 19ではフレームワークに依存しない機能になっています。フォームからはaction属性で直接使用でき、内部のシークレットがブラウザーに届くことはありません。