Zenn
🍓

通常のフォーム vs RSC（React Server Components）フォーム

に公開
React
form
Server Actions
rsc
tech

RSC（React Server Components）は、React 18 から導入された仕組みで、コンポーネントをサーバー側で実行し、その結果だけをブラウザに送れるようにしたもの。これによりフロントエンドとバックエンドの境界がシンプルになった。

フォーム実装を例にあげると APIエンドポイントを介さずに「フォームから直接サーバー関数を呼び出せる」という新しい仕組みで、フォーム送信をシンプルに書けるのが特徴。

通常のフォーム

  • action には URL を入れる（例: /api/contact）
  • 送信するとブラウザがその URL に HTTP リクエストを送る
  • サーバー側に専用のエンドポイント（Express のルートなど）が必要
<form action="/api/contact" method="POST">
  <input type="text" name="name" />
  <button type="submit">送信</button>
</form>

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  await fetch('/api/contact', {
    method: 'POST',
    body: new FormData(e.currentTarget),
  });
};

return (
  <form onSubmit={handleSubmit}>
    <input type="text" name="name" />
    <button type="submit">送信</button>
  </form>
);

RSC（React Server Components）を使ったフォーム

  • action には、 URLではなく、直接サーバー関数 (postContent) を渡せる
  • 送信すると React が自動で FormData をまとめて、そのサーバー関数を呼んでくれる
  • API エンドポイントを自分で書かなくてもいい
  • useActionState や useFormStatus と組み合わせれば「送信中...」の状態管理もできる
<form action={postContent}>
  <input type="text" name="name" />
  <button type="submit">送信</button>
</form>

まとめ

項目 通常フォーム RSCフォーム
action URL指定 サーバー関数
サーバー処理 APIエンドポイントが必要 Server Actionを直接呼べる
状態管理 自前で実装 useActionState などで簡単

Discussion