Функции сервера

Компоненты сервера React

Когда функция сервера определена с помощью директивы "use server", ваш фреймворк автоматически создаст ссылку на функцию сервера и передаст эту ссылку клиентскому компоненту. Когда эта функция вызывается на клиенте, React отправит запрос на сервер для выполнения функции и вернет результат.

Функции сервера могут быть созданы в компонентах сервера и переданы как свойства клиентским компонентам, или они могут быть импортированы и использованы в клиентских компонентах.

Использование

Создание функции сервера из компонента сервера

Компоненты сервера могут определять функции сервера с помощью директивы "use server":

// Server Component
import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';
    
    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

Когда React отображает EmptyNote функцию сервера, он создаст ссылку на createNoteAction функцию и передаст эту ссылку Button клиентскому компоненту. При нажатии на кнопку React отправит запрос на сервер для выполнения createNoteAction функции с предоставленной ссылкой:

"use client";

export default function Button({onClick}) { 
  console.log(onClick); 
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  return <button onClick={() => onClick()}>Create Empty Note</button>
}

Для получения дополнительной информации см. документацию по "use server".

Импорт функций сервера из клиентских компонентов

Клиентские компоненты могут импортировать функции сервера из файлов, использующих директиву "use server":

"use server";

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

Когда сборщик создает EmptyNote клиентский компонент, он создаст ссылку на createNoteAction функцию в сборке. При нажатии на button React отправит запрос на сервер для выполнения createNoteAction функции с предоставленной ссылкой:

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

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

Для получения дополнительной информации см. документацию по "use server".

Функции сервера с действиями

Функции сервера могут вызываться из действий на клиенте:

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);

  const [isPending, startTransition] = useTransition();

  const submitAction = async () => {
    startTransition(async () => {
      const {error} = await updateName(name);
      if (!error) {
        setError(error);
      } else {
        setName('');
      }
    })
  }
  
  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {state.error && <span>Failed: {state.error}</span>}
    </form>
  )
}

Это позволяет получить доступ к isPending состоянию функции сервера, обернув её в действие на клиенте.

Для получения дополнительной информации см. документацию по Вызову функции сервера вне <form>

Функции сервера с действиями форм

Функции сервера работают с новыми функциями форм в React 19.

Вы можете передать функцию сервера в форму для автоматической отправки формы на сервер:

"use client";

import {updateName} from './actions';

function UpdateName() {
  return (
    <form action={updateName}>
      <input type="text" name="name" />
    </form>
  )
}

После успешной отправки формы React автоматически сбросит форму. Вы можете добавить useActionState для доступа к состоянию ожидания, последнему ответу или для поддержки поэтапного улучшения.

Для получения дополнительной информации см. документацию по Функции сервера в формах.

Функции сервера с useActionState

Вы можете вызвать функции сервера с useActionState в случае, когда вам нужен только доступ к состоянию ожидания действия и последнему возвращенному ответу:

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [state, submitAction, isPending] = useActionState(updateName, {error: null});

  return (
    <form action={submitAction}>
      <input type="text" name="name" disabled={isPending}/>
      {state.error && <span>Failed: {state.error}</span>}
    </form>
  );
}

При использовании useActionState с функциями сервера React также автоматически воспроизведёт отправки форм, введенные до завершения гидрации. Это означает, что пользователи могут взаимодействовать с вашим приложением даже до его гидрации.

Для получения дополнительной информации см. документацию по useActionState.

Поэтапное улучшение с useActionState

Функции сервера также поддерживают поэтапное улучшение с третьим аргументом useActionState.

"use client";

import {updateName} from './actions';

function UpdateName() {
  const [, submitAction] = useActionState(updateName, null, `/name/update`);

  return (
    <form action={submitAction}>
      ...
    </form>
  );
}

Когда ссылка предоставляется useActionState, React перенаправит на предоставленный URL, если форма отправлена до загрузки JavaScript-сборки.

Для получения дополнительной информации см. документацию по useActionState.