React 19 RC の Actions にて POST でやりとりされているもの

先月くらいから仕事で React 19 RC 周りの動作検証や仕様確認をいろいろしている。 そんな中で、後で気づいたのがこの form 関係のドキュメントにある一文。

「action または formAction に関数が渡された場合、HTTP メソッドは method の値に関わらず POST になります」

Actions では useActionState を使った従来の Ajax 的なアプローチを form 要素の action 属性を使って実装をすることが出来る。

• useActionState – React

それ以外にもサーバーアクションを使ってサーバー側の処理を実行させることが可能だ。

ただ、前述の「action または formAction に関数が渡された場合、HTTP メソッドは method の値に関わらず POST になります」については見逃していたのだった。結構重要なことがさらっと書いてある。で、自動で HTTP メソッドが POST に決定されるとして、実際どんな値がやりとりされるのであろうか。

Next.js 15.0.0-rc.0 を使えば、今すぐにでも試すことができる。

例えば fetch をするような作りではなく、純粋にサーバーの関数を実行して何かのオブジェクトを返すようなものを action に指定したらどうなるのだろう。例えばこういうやつ。

'use server'

export async function testAction(name: string) {
  const result = { id: "1", name: name, message: "message" };
  return result;
}

なんとなく結果は、リクエストパラメータで引数が渡り、返り値は JSON で返ってくるんだろうかって予想する。

しかし実際はそうはならない。

Chrome の開発ツールで確認すると、Payload は ["<Name の値>"] となる。つまり引数の配列として渡されるのだ。またレスポンスは例えばこんなような値が返ってくる

0:["$@1",["development",null]]
1:{"id":"1","name":"<Name の値>","message":"message"}

React Server Component を使ってみたことがあって、やりとりされるサーバー側コンポーネントの値を見たことがある人ならこのタイプかって思うかもしれない。

JSON ベースでやりとりされているわけではないこの感じ、効率的なんだろうけど独自過ぎて将来大丈夫なんだろうかと不安にはなるけど、今後構成は変わるかもしれないし、しばらく使い込んでみてメリットデメリットを把握していこうと思う。