Server Actionsとは何ですか？

Question

Accepted Answer

**Server Actions**は、**サーバー上で**実行される非同期関数ですが、コンポーネントから直接呼び出すことができます（フォームやイベントハンドラーを含む）。これにより、**APIエンドポイントを手動で構築することなく**、ミューテーション（作成/更新/削除）を実行できます。**`"use server"`**ディレクティブで標識します。 ## 定義と使用方法 ```tsx // app/todos/actions.ts "use server"; import { revalidatePath } from "next/cache"; export async function createTodo(formData: FormData) { const title = formData.get("title") as string; await db.todo.create({ data: { title } }); // runs on the server — DB access, secrets revalidatePath("/todos"); // refresh the cached page with new data } ``` ```tsx // app/todos/page.tsx — wire the action straight to a form import { createTodo } from "./actions"; export default function Page() { return ( ); } ``` フォームの`action`はServer Actionを指します。送信時、Next.jsは`FormData`をサーバーに送信し、そこで関数を実行して、影響を受けるページを再検証できます。すべてAPIルートなしで、クライアント側のフェッチコードもありません。 ## クライアントコンポーネントから呼び出す ```tsx "use client"; import { createTodo } from "./actions"; export function AddButton() { return ; } ``` ## 強力な理由 - **APIボイラープレートなし** — `route.ts`ハンドラーとクライアントフェッチを書かずにミューテーションを実行。 - **プログレッシブエンハンスメント** — JavaScriptが読み込まれる前でもフォームアクションが機能（フォームがサーバーにポスト）。 - **組み込みの再検証** — `revalidatePath`/`revalidateTag`がミューテーション後にキャッシュされたデータをリフレッシュ。 - **型安全** — 関数を直接呼び出し、引数は型付けされています。 ## セキュリティに関する注記 ```text ⚠️ Server Actions are PUBLIC endpoints under the hood — always validate input and check authorization inside them, exactly as you would a real API route. ``` ## なぜ重要なのか Server Actionsは、通常のミューテーションスタック（APIルート + クライアントフェッチ + 状態処理）を、直接呼び出す単一のサーバー関数に折りたたみます。これはApp Routerのフォームとデータ変更への答えです。ボイラープレートを削減し、プログレッシブエンハンスメントを有効にし、キャッシング/再検証と統合されますが、（他のエンドポイントと同様に）内部での検証と認可チェックが必要です。