Вопрос с собеседования · Frontend

Что такое Server Actions и как с ними делать формы?

MiddleReact
Ещё спрашивают так:
  • Что значит "use server"?
Коротко

Server Action — асинхронная функция с директивой "use server", которая выполняется на сервере, но вызывается из клиента: её передают в <form action={createOrder}> или вызывают из обработчика. Фреймворк сам делает POST-запрос. Форма работает даже без JavaScript (прогрессивное улучшение). После изменения данных вызывают revalidatePath или revalidateTag, чтобы обновить кэш. Состояние отправки и ошибки — useActionState и useFormStatus.

  • Action — публичный эндпоинт: проверять авторизацию и валидировать вход (Zod) внутри
  • Не возвращать лишние данные — они уходят клиенту
  • Редирект после успеха — redirect()

А ещё «use server» не делает функцию безопасной — это сетевой вызов

Подробно

async function createOrder(formData: FormData) {
  "use server";
  const user = await requireUser();
  const data = OrderSchema.parse(Object.fromEntries(formData));
  await db.order.create({ ...data, userId: user.id });
  revalidatePath("/orders");
}
<form action={createOrder}><input name="title" /><button>Создать</button></form>

Что хотят услышать

  • Серверная функция, вызываемая с клиента.
  • Формы и прогрессивное улучшение.
  • Ревалидация кэша.
  • Проверка прав и валидация внутри.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✓Функция с "use server" выполняется на сервере; внутри нужны проверка прав и валидация
  • ✗Server Action автоматически защищён от неавторизованных вызовов, проверять права не нужно
  • ✗Server Action выполняется в браузере пользователя
  • ✗Форма с Server Action не работает без JavaScript

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования