Reactの新要素「Server Functions」とは？サーバ関数の特長やメリットを解説

はじめに

モダンなWebアプリケーションでは、リアルタイムな対話型のUIによりユーザーの満足度を高めながらも高いパフォーマンスが求められています。そのため、最新のWebアプリケーションフレームワークでは、それらの要求を満たすための新しい機能や仕組みが発展してきています。

ReactもWebアプリケーション開発における開発生産性やユーザビリティを高めるフレームワークの1つであり、便利で新しい機能が追加されてきています。この記事ではReactで登場した新しい概念であるServer Functionsの特長を解説していきます。

Server Functionsとは

Server Functions（サーバ関数）とは、クライアント側からサーバ上の関数を呼び出すことができるReactの機能で、Webアプリケーションの非同期処理に使われます。ReactではUIの外観や装飾、イベント処理などをコンポーネントにまとめて記述されますが、Server Functionsもその中に含みます。

Server Functionsの作り方は非常に簡単で、コンポーネントにuse serverの宣言を加えるだけです。例えば、下記のようなコードではcreateNoteがServer Functionsとなります。

"use server";

export async function createNote() {
  await db.notes.create();
}

Server Functionsはクライアントで実行されるコード（クライアントコンポーネント）から呼び出しが可能です。下記のようにServer Functionsをインポートしてイベントハンドラに記述します。

"use client";
import {createNote} from './actions';

function EmptyNote() {
  console.log(createNote);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}
  <button onClick={() => createNote()} />
}

このように、Server Functionsはデータ操作を伴うバックエンド処理を簡単にフロントエンドと紐づけることができます。

なお、上述したようなコードはServer Action（サーバアクション）と呼ばれていましたが、現在はServer Functionsと総称されるようになりました。ただし、Formタグのaction属性を通じて呼び出されるようなServer FunctionsはServer Actionと位置付けられます。

Server Functionsの特長

コード量の削減

Server Functionsを使うと、ブラウザ操作を起点としてサーバ上の非同期処理を実行できますが、API経由の呼び出しでも同様の処理は実現可能です。ただし、Server Functionsはコンポーネントの中に記述できることから、従来よりもコード量を減らすことができます。特に、フォームのバリデーションや後処理、操作への応答などが整理されるため、開発者側のメリットにつながります。

通信効率の向上

Server Functionsはサーバ側のコンポーネントと密に連携して動作することから、ユーザーの操作に対して従来よりも高いパフォーマンスを発揮できます。例えば、フォーム送信後のページ遷移はServer Functionsで実装できるため、クライアント側からHTTPによるリクエストを改めて送ることなくリダイレクトが可能です。

React Server Componentsとの違い

React Server ComponentsはReactの新しい要素であり、Server Functionsとも関連がある仕組みです。

まずReact Server Componentsは、サーバ側で先に組み立てられるコンポーネントであり、クライアント側で組み立てられるコンポーネントと対極の要素です。従来のコンポーネントを描画するとき、クライアント側に処理が偏ったことでパフォーマンスの面で問題を抱えていましたが、サーバ側と役割分担することで改善させました。

一方で、Server Functionsはユーザーの操作に対して、データ操作などを非同期的に処理する目的で使用されます。Server Functionsは関数の単位で呼び出すことができるため、イベント処理やフォーム送信に利用されます。

Server Functionsを使ってみよう

ここからは、Reactのメタフレームワーク「Next.js」を使ってServer Functionsを作成する方法を解説していきます。Next.jsの実行に必要なNode.jsを導入していない方は、次節のインストールに進みましょう。

Node.jsのインストール

Node.jsの公式サイトのダウンロードページにアクセスします。

ページ下部に表示されているOSとアーキテクチャを選択し、左の緑色のボタンをクリックしてインストーラーのダウンロードを行います。

• macOSの場合は、「macOSインストーラー」
• Windowsの場合は、「Windowsインストーラー」

ページ上部にバージョン（2025年7月時点の推奨版は「v22.17.0（LTS）」）の選択肢がありますが、その時点のバージョンをダウンロード頂ければ問題ありません。尚、最新版（Currentの付いたバージョン）は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。

インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。

インストール後、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。

• macOSの場合は、「ターミナル」アプリ
• Windowsの場合は「PowerShell」または「コマンドプロンプト」

以下のコマンドを実行し、結果を確認します。

node -v
npm -v

実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができてきます。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。

Server Functionsを使ったWebアプリケーションの作成

まずはNext.jsのWebアプリケーションを作成していきましょう。Webアプリケーションを作成するディレクトリに移動してから下記のコマンドを実行しましょう。

npx create-next-app@latest example-sf
cd example-sf

作成したプロジェクトに移動したら、新しいコードとして下記のように「app/actions.tsx」、「app/ui/form.tsx」のファイルを追加します。

'use server'

import { cookies } from 'next/headers'

export async function entryUser(formData: FormData) {
  const name = formData.get('name') as string
  const email = formData.get('email') as string 

  const cookieStore = await cookies()
  cookieStore.set('name', name)
  cookieStore.set('email', email)
}

import { entryUser } from '@/app/actions'
import { cookies } from 'next/headers'

export async function Form() {
    const cookieStore = await cookies()
    const name = cookieStore.get('name')
    const email = cookieStore.get('email')

    return (
        <>
        <form action={entryUser}>
            <input type="text" name="name" /><br/>
            <input type="text" name="email" /><br/>
            <button type="submit">登録</button>
        </form>
        <div>名前　　　　　： {name?.value}</div>
        <div>メールアドレス： {email?.value}</div>
        </>
    )
}

続いて、既存ファイルの「app/layout.tsx」、「app/page.tsx」を下記のように変更します。

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja" suppressHydrationWarning>
      <body>{children}</body>
    </html>
  );
}

import { Form } from '@/app/ui/form'

export default function Page() {
    return <Form />
}

すべて変更ができたら、下記のコマンドでローカルサーバを起動してみましょう。

npm run dev

起動が完了したらコンソールに表示されるURL「http://localhost:3000」にブラウザでアクセスしましょう。下記のような画面が表示されれば成功です。

2つの入力欄にテキストを入力して登録ボタンをクリックするとServer Functionsが起動し、Cookieを経由して画面にその文字列が表示されるようになっています。

さいごに

Reactの新要素であるServer Functionsは、ブラウザ側のイベント処理やフォーム送信に利用できる非同期関数を実装できる仕組みです。サーバ側で実行されるため、セキュリティ上の面で秘匿したい処理やデータベース処理に活用されます。Webアプリケーションのパフォーマンス向上につながるため、優れたユーザー体験の実現に役立ちます。

メシウスではReactをはじめとした様々なWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。

無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。