春日部つむぎ「APIルートとサーバーアクションって、どう違うんですか？」

:::note warn
この記事は`Gemini-exp-1114`で生成した内容をベースに使用しています。
:::

---

ずんだもん「こんにちは！僕ずんだもんなのだ！今日はつむぎちゃんと一緒に、Next.js の **API ルート** と **サーバーアクション** の使い分けについて解説するのだ！」

つむぎ「春日部つむぎです！ずんだもんさん、よろしくお願いします！API ルートとサーバーアクション、名前は似てるけど、どう違うんですか？」

ずんだもん「良い質問なのだ！まずは **API ルート** から説明するのだ！API ルートは昔からある Next.js の機能で、**クライアントから独立した API のエンドポイント**を作れるのだ！データの取得や更新、認証処理など、サーバーサイドの処理全般を担える万能選手なのだ！」

:::note info
**API ルートの基本**

- `pages/api` ディレクトリにファイルを作成して API エンドポイントを定義します。
- ファイル名はエンドポイントのパスに対応します。例えば `pages/api/users.js` は `/api/users` というエンドポイントになります。
:::

つむぎ「なるほど、サーバー側の処理なら何でもお任せって感じですね！」

ずんだもん「その通りなのだ！例えば、`pages/api/hello.js` を作ると `/api/hello` というエンドポイントにアクセスした時に、データを送り返せるのだ！」

```javascript
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API Route!' });
}
```

つむぎ「このコードだと `/api/hello` にアクセスすると `{"message": "Hello from API Route!"} `という JSON データが返ってくるんですね！」

ずんだもん「さすがつむぎちゃん、理解が早いのだ！API ルートは汎用性が高い反面、**クライアントサイドから呼び出すためには fetch などの API リクエストが必要になる**のだ。ちょっと手間がかかるのだ。」

つむぎ「なるほど…もっと簡単にサーバー側の処理を実行できる方法はないんですか？」

ずんだもん「そこで登場するのが**サーバーアクション**なのだ！サーバーアクションは React コンポーネントの中から直接サーバーサイドの関数を呼び出せる、Next.js 13 で導入された新機能なのだ！」

:::note info
**サーバーアクションの特徴**

Next.js 13 から導入された機能で、**React コンポーネントから直接サーバーサイドの関数を呼び出せます**。
fetch を使わずにサーバーと通信できるので、クライアントサイドのコードがシンプルになります。
:::

つむぎ「**コンポーネントの中から直接サーバーサイドの関数を実行できる**んですか！？それは便利そうですね！」

ずんだもん「そうなのだ！`use server` ディレクティブを付けた関数を定義するだけで、サーバーアクションが作れるのだ！例えば、ボタンをクリックした時にサーバー側の処理を実行する例を見てみるのだ！」
```js
// app/actions.js
'use server'; // サーバーサイドで実行されることを示す

export async function serverAction() {
  // サーバーサイドの処理
  return 'Hello from Server Action!';
}
```
```js
// app/page.js
'use client'; // クライアントサイドのコンポーネントであることを示す

import { useState } from 'react';
import { serverAction } from './actions';

export default function Page() {
  const [message, setMessage] = useState('');

  const handleClick = async () => {
    const result = await serverAction();
    setMessage(result);
  };

  return (
    <div>
      <button onClick={handleClick}>サーバーアクションを実行！</button>
      <p>{message}</p>
    </div>
  );
}
```

つむぎ「ServerAction 関数に `use server` って書いてあるのがポイントですね！これでサーバー側で実行されるってことですね！」

ずんだもん「ご明察！その通りなのだ！クライアント側では通常の関数と同じように呼び出すだけで、サーバー側の処理結果を受け取れるのだ！ fetch を使う必要がないからコードがシンプルになるのだ！」

:::note warn
**サーバーアクションの注意点**

`use server` ディレクティブを付けたファイル内では、useState などの React Hooks や、window オブジェクトなどのブラウザ特有の API は使用できません。

サーバーアクションは app ディレクトリ内でのみ使用可能です。
:::

つむぎ「サーバーアクション、めっちゃ便利ですね！でも、API ルートとどう使い分ければいいんですか？」

ずんだもん「良い質問なのだ！使い分けのポイントは **クライアントとの密結合度**なのだ！」

つむぎ「クライアントとの密結合度？」

ずんだもん「**サーバーアクション**は、**UIと密接に関連した処理**、**フォーム送信**、**データ更新**など、単一のコンポーネントから呼び出される処理に適しているのだ。」

ずんだもん「**API ルート**は、複数のクライアントや外部サービスから利用される**汎用的なAPI**、**認証処理**、**ファイル操作**など、独立した API として公開したい処理に適しているのだ。」

つむぎ「なるほど！UI と密接に関わる処理はサーバーアクション、汎用的な API は API ルートってことですね！」

ずんだもん「そういうことなのだ！ちなみにサーバーアクションは React **Server Components**との相性も抜群なのだ！サーバーでデータを取得して、そのままクライアントコンポーネントに渡すこともできるのだ！」

:::note info
**React Server Components との連携**

サーバーアクションは React Server Components と組み合わせることで、より効果的にサーバーサイドの処理を活用できます。サーバーで取得したデータを直接クライアントコンポーネントに渡せるので、パフォーマンスの向上やコードの簡潔化が期待できます。
:::

つむぎ「使い分けがわかってスッキリしました！ずんだもんさん、ありがとうございました！」

ずんだもん「どういたしましてなのだ！サーバーアクションと API ルートを使いこなして、素敵な Next.js アプリを作るのだ！」

---

私は普段、WEBサービスやモバイルアプリの自社開発・運営を行っております。
特にAI駆動の開発を採用して、個人規模で高品質かつ高速なプロダクト開発ができるように、日々活動をしています。

よろしければ[**Xアカウント**](https://x.com/dai_mori219)のフォローをお願い致します。