👼

Server Actions って React の機能なん?

2024/05/12に公開

はじめに

Server Actions について学ぶ際に、Nextjs の以下のドキュメントを確認していたこともあり、Server Actions は Nextjs の機能と思い込んでいました(恥ずかしい...👼)。

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

しかし、どうやら React の機能らしい...React 19 ベータの新機能に Server Actions は含まれています。

https://ja.react.dev/blog/2024/04/25/react-19

ただ、いかんせん React と Nextjs でどういった機能配置で Server Actions が実装されているかわからなかったため、それを調べてみた感じです。

注意事項

この記事には誤りも多分に含まれているかと思いますので、もし、誤りがあれば優しくコメント頂ければ嬉しいです。ちなみに、普段より正確性の確認作業をサボっているため、記載内容に自信はございません。

結論

React の Server Actions は、サーバー側で実行可能な関数の仕組みとして React が提供している、と私は理解しました。よくよく考えると、React Server Component も機能配置としては同じかな、と思います。

あくまでも React が提供している機能を Nextjs が使っているのであって、Server Actions は Nextjs 以外のフレームワークも使用可能ではあります(Server Actions を機能として取り込んでいるフレームワークを Nextjs 以外に私は知らないです)。

Server Actions の処理の流れ

Server Actions の機能配置は結論に記載した通りですが、もう少し詳細の機能配置についても一応調べたので記載しておきます。

Server Actions の処理の流れは、ざっくり以下のようになっているかな、と思います。この内、1-a から2-c までは React 側で提供されている機能になり、2-d のアクションの実行のみが Nextjs 側に実装されています。

1) クライアント側
  1-a) ユーザーがフォームを送信するなどの操作を行う
  1-b) フォームの入力値や関連情報がエンコードされる
  1-c) エンコードされたデータがネットワークリクエストとしてサーバーに送信される
2) サーバー側
  2-a) リクエストを受信する
  2-b) リクエストペイロード(=フォームの入力値等)をデコードする(実行対象のアクションのIDが含まれている)
  2-c) サーバー側のアクションをロードする
  2-d) アクションの実行

まず、React の Server Actions のアクションは、クライアント側にてフォーム実行などをトリガーに実行されます(1-a)。フォーム実行の内容は、フォームの入力値やそのフォームに紐ずくアクションのIDが含まれおり、これらはエンコードされます(1-b)。エンコードされたプロパティは、ネットワークリクエストとしてサーバーに送信されるため、フォームのプロパティにはエンコード可能なもののみが渡せます(1-c)。

(参考: フォームのプロパティのエンコードの実装)
https://github.com/sebmarkbage/react/blob/249f02a6175a38ed7213c79f80436cbc4f42de24/packages/react-client/src/ReactFlightReplyClient.js#L411

(参考: フォームのプロパティのデコードの実装)
https://github.com/sebmarkbage/react/blob/249f02a6175a38ed7213c79f80436cbc4f42de24/packages/react-server/src/ReactFlightActionServer.js#L56

(参考: エンコード可能なリスト)
https://react.dev/reference/rsc/use-server#serializable-parameters-and-return-values

次にサーバー側でリクエストを受信します(2-a)。リクエストの内容をデコードし、実行対象のアクションのIDやアクションの引数を取得します(2-b)。取得したアクションのIDを元に、実行するアクションをロードします(2-c)。ここまでが React として提供されている機能であり、アクションの実行は Server Actions を利用するフレームワーク側の実装に委ねられています。

React の Server Actions は、サーバー側で実行可能な関数の仕組みとして React が提供している

そのため、機能配置としては簡素にまとめると上記になるのかな、と私は思っています。
アクションの実行部分は、React がサンプルコードとして公開しています(Nextjs もこんな感じで実装しているんだろうと想像しています)。

(参考:サンプルコード)
https://github.com/sebmarkbage/react/blob/249f02a6175a38ed7213c79f80436cbc4f42de24/fixtures/flight/server/region.js#L105-L163

感想

React と Nextjs の機能配置の境界って別に明確じゃなくてもいいかもしれません...SPA フレームワークとして単体で React を使うこともないでしょうし、React + Nextjs で使用できる機能として理解しておくでも全然いい気がしました👼

Discussion