サーバー関數(shù)は、クライアント上で參照され、サーバー上で実行される関數(shù)です。

これが例です:

'use client'

import { useActionState } from "react";

import { updateName } from "@/app/react-19-server-function/actions";


export default function Page() {

    const [error, submitAction, isPending] = useActionState(
        async (_previousState, formData) => {
            const error = await updateName(formData.get("name") as string);
            if (error) {
                return error;
            }

            return ""
        },
        "",
    );

    return <div>
        <h1>React 19: Server Functions</h1>
        <fieldset>
            <div>Name</div>

            <form action={submitAction}>
                <input type="text" name="name" />

                <button type="submit" disabled={isPending}>Save</button>
            </form>

            <div>
                {error && <p>{error}</p>}
            </div>
        </fieldset>
    </div>
}

useActionState の詳細(xì)については、以前の投稿を確認(rèn)してください

updateName がどのようにインポートされるかに注目してください。

import { updateName } from "@/app/react-19-server-function/actions";

そして useActionState.

これは、フォームが送信されるたびに submitAction が実行され、その後 updateName が呼び出されるという意味です。

それでは、updateName:
をチェックしてみましょう。

"use server";

export async function updateName(name) {
  if (name?.length < 2) {
    return "Name must be at least 2 characters.";
  }

  return "";
}

名前の長(zhǎng)さをチェックする非常にシンプルな関數(shù)です。 2 文字未満の場(chǎng)合はエラーが返されます。それ以外の場(chǎng)合は、エラーがないことを意味する空の文字列を返します。

もう 1 つ注意すべき點(diǎn)は、「サーバーを使用する」というディレクティブです。これにより、関數(shù)がサーバー上で実行されることが React に伝えられ、クライアントが使用できる?yún)⒄栅鞒嗓丹欷蓼埂?/p>

UI は非常に簡(jiǎn)単で、次のようになります。

フォームが値なしで送信されると、いくつかの興味深い詳細(xì)を含む POST ネットワーク リクエストが表示されます。

• content-type: は text/x-component です。

• ペイロードは空であっても自動(dòng)的に渡されます。

• 応答は JSON のようなものです。

リンク

• コードベース

結(jié)論

サーバー関數(shù)は、サーバー上で実行される関數(shù)です。別の方法は、フェッチを手動(dòng)で使用してバックエンドにリクエストを行い、ステータス コードの読み取りやペイロードの解析などの処理を行うことです。

サーバー機(jī)能を使用すると、通信部分について心配する必要がなくなります。 「use server」ディレクティブを使用して関數(shù)を作成し、それをクライアント ファイルにインポートするだけで、殘りはフレームワークが処理します。

以上がReactサーバーの機(jī)能の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。