【Next.js】ServerActions(サーバーアクション)とは何か？歴史や背景。use serverの意味

「Next.jsを使い始めたけれど、Server Actionsって何？」そんな疑問を抱えていませんか？

Server Actionsは、これまでのWeb開発で当たり前だった「API作成」という手間を劇的に減らしてくれる画期的な機能です。

本記事では、プログラミング初心者の方でも直感的に理解できるよう、Server Actionsの基本概念から、歴史的な背景、そしておまじないのように書く「use server」の本当の意味をわかりやすく解説しています。

ServerActions(サーバーアクション)とは何か？

Next.jsのServer Actions（サーバーアクション）は、ブラウザからサーバー上の関数を直接呼び出せる仕組みのことです。

サーバーにデータを保存するために使う、とても便利な機能です。

これまでのWeb開発では、フロントエンドからサーバーにデータを送るために「APIエンドポイント」を作る必要がありましたが、Server Actionsを使えばAPIエンドポイントを作る手間を省略できます。

ServerActionsが登場した理由/歴史

ServerActionsはブラウザ上の入力値や処理とサーバーのデータを結びつけるための関数を呼び出す仕組みです。

なぜServerActionsが登場したかを知るには、ブラウザ経由でのサーバーのデータ更新の方法を知る必要があります。

初期：サーバーサイドレンダリング

昔のWebサイトは、ボタンを押すたびにページ全体を読み込み直していました。

ユーザーがフォームを送信すると、ブラウザがサーバーに直接データを送り、サーバーが新しいページを丸ごと作り直して返していました。

仕組みが単純で、データの保存も表示も一箇所（サーバー）で完結するというメリットがある一方で、ボタン一つ押すたびに画面が真っ白になり、動作が重いという大きなデメリットがありました。

（2000年代〜2010年代前半：PHP, Ruby on Railsなど）

中期：API＋SPA

画面の表示速度をよりスムーズにするために、「フロントエンド（見た目）」と「バックエンド（データ処理）」を完全に切り分ける手法が主流になりました。

そのためには、フロントエンドはReactなどをブラウザ上で動かし、バックエンドはデータをやり取りするための専用の窓口（API）を作る必要がありました。

APIを使うために、サーバー側にURL（エンドポイント）を決め、フロント側でfetchを書いてデータを送るという処理を作成します。

更に、送るデータの型が合っているかをチェックすることも必要で、ちょっとしたデータをサーバーに保存するのにも大きな手間が必要でした。

（2010年代後半〜：React, Vue.jsなど）

現在：Server Actions

API作成の手間を省くために開発されたのがServer Actionsです。

APIという中継地点が不要で、フロントエンドからサーバーの関数を直接呼べるようにすることで、開発のスピードを劇的に上げました。

APIを使うとデータの型が壊れやすいですが、Server Actionsならフロントとバックが同じ言語（TypeScript）で直結されるため、ミスを防ぐことができます。

Server ActionsはHTML標準の仕組み（form）を利用しているため、低速なネット環境でも「送信ボタン」が確実に動きます。」

ServerActionsの登場でどれだけ簡単になったか？

ServerActionsが登場したことで、サーバーへのデータ保存がどれだけ簡単になったかは、APIを作る流れと比較するとわかりやすいです。

APIを使う場合

従来のAPIを使う方法は以下のようになります。

1. サーバー側に「保存用」のAPI（/api/saveなど）を作る。
2. フロントエンドで、入力データをfetch関数などでそのAPIに送る。
3. API側でデータを受け取り、データベースに保存する。

ServerActionsを使う場合

ServerActionsを使う場合は、より直感的にフロントエンドと結びつけることができます。

ServerActionsを使うためのルール（”use server”;）

ServerActionsではサーバーとやり取りするための関数を作成します。その際は必ずファイルの冒頭に "use server"; を記述します。

なお、ファイル名や設置場所に厳格なルールはありません。

"use server";

ServerActionsの具体例

関数の作成

ServerActionsを使うためにはまずサーバーにデータを保存するための関数を作成します。

"use server";

export async function saveUser(formData: FormData) {
  const name = formData.get("userName");
  
  // ここにデータベースへの保存処理などを書く（ブラウザには公開されない）
  console.log(`${name}をデータベースに保存しました`);
}

フロントエンドに関数をセットする

作成した関数 saveUserをフロントエンドにセットします。

import { saveUser } from "./actions"; //actions.tsのパス

export default function Profile() {
  return (
    <form action={saveUser}>
      <input type="text" name="userName" />
      <button type="submit">保存する</button>
    </form>
  );
}

以下のようにformのaction属性の値に関数を直接セットします。

<form action={saveUser}>

これで送信ボタンが押されたときに、Server Actionsの指定した関数を実行します。

use serverがないとどうなる？

“use server” を書き忘れると、その関数は「サーバーで動く特別な関数」として認識されず、単なる「ブラウザ側で動く普通の関数」として扱われます。

ブラウザが直接DBに接続しようとして失敗しエラーが発生します。

また、フォームの action に渡したときにエラーが出ます。

Next.jsのフォーム（<form action={...}>）に渡す関数には、「サーバー側で実行可能なURL」が自動的に割り当てられる必要があります。

"use server" がないとこの「自動割り当て」が行われないため、Reactが「この関数はフォームの送信先として正しくありません」というエラーを画面に表示します。

use clientとの違い（サーバーコンポーネントになるわけではない）

use severと似た記述に use clientがあります。

use clientはそのファイルにあるコンポーネントをクライアントコンポーネントにするための宣言です。Next.jsではコンポーネントはデフォルトでサーバーコンポーネントとなるため、ブラウザ側で入力やボタン操作などの処理を行う場合は use clientの宣言が必須となります。

一方、use serverはServerActionsでサーバー関数を使うための宣言です。サーバーコンポーネントにするわけではありません。

ServerActionsではできないこと

外部から呼び出すことができない

Server Actionsは、あくまで自分のサイト（Next.jsアプリ）のブラウザから呼び出すことを前提に設計されています。

このため、外部のアプリから呼び出すことはできません。

GETリクエストによるデータ取得ができない

Server Actionsは基本的にデータの「更新（保存・削除）」のために設計されており「POST」で動きます。

このため、ブラウザのURLを叩いて関数を実行し、その結果を画面に表示させる「GET」による使い方はできません。

レスポンスの種類を細かく指定できない

Server Actionsは「関数の戻り値」を返すことに特化していて、基本的に、実行に成功したか失敗したかの「オブジェクト（データ）」を返すのみです。

このため、「画像ファイルをダウンロードさせる」「XML形式で返す」「ステータスコードを404ではなく418にする」といった、高度なレスポンス制御はできません。

これをするにはAPI Routeが必要になります。