「"use server" ってあるけど、デフォルトで"use server"なんだよね？」←ちがう (半年前の俺へ)

はじめに

この記事は「"use server" ってあるけど、デフォルトで"use server"なんだよね？」ってちょっと（かなり）勘違いしていた半年前の自分に対して「ちがうよ」って言う記事です。
サーバーアクションについての詳しい説明はありません。

知っていたこと

• componentには「sever component」と「client component」がある
• App router ではとくになにもしないと「server component」になる
• Hooksをつかうときや、イベントハンドラ(clickイベントなど)を登録したい場合は「client component」にする必要がある。
• 「client component」にするには「"use client"」ディレクティブをつけてあげる

勘違いしていたこと

以上の流れにより、"use server"ディレクティブをつけると「server component」になるとおもっていた。
つまりタイトルにある「デフォルトで"use server"なんだよね」は、「デフォルトでserver componentになるんだよね」のつもりで言っていた。これ自体はあっているが、"use server"の認識が間違っている。

半年前の俺にいいたいこと

• "use server"は「server componentにしたいときに書く」ものではないんだよ
• "use server"は「エクスポートする関数がサーバーアクションである（サーバーサイドの関数である）とマークしたい時に、ファイル先頭に書く」んだよ¹
• つまり、componentに対して、ではなくて、関数に対してマークしているんだよ
• ちなみに"use server"をつけない場合、クライアント側で関数を呼び出したらクライアント側で実行されるから、「デフォルトで"use server"なんだよね」はやっぱり違うよ

1. 非同期関数の本体の冒頭に書くやり方もあります。（https://ja.react.dev/reference/rsc/use-server） ↩