PassFront
  1. PassFront
  2. База знаний
  3. Server Side Rendering

Что такое Server Actions в Next.js?

Server Side Rendering

Server Action — асинхронная функция, которая выполняется на сервере и вызывается прямо из формы или компонента, без ручного создания API-маршрута.

Как выглядит

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';

export async function addTodo(formData: FormData) {
  const title = String(formData.get('title'));
  await db.todo.create({ data: { title } });
  revalidatePath('/todos');
}

// app/todos/page.tsx
import { addTodo } from '../actions';

export default function Page() {
  return (
    <form action={addTodo}>
      <input name="title" />
      <button>Добавить</button>
    </form>
  );
}

Особенности

  • Форма работает и без JavaScript (прогрессивное улучшение).
  • Next.js сам делает POST-запрос и сериализует аргументы.
  • После мутации можно инвалидировать кеш и обновить страницу.
  • Состояние ожидания и ошибки берут через useFormStatus и useActionState.

Безопасность

Server Action — это публичный HTTP-эндпоинт. Внутри нужно проверять авторизацию и валидировать входные данные так же, как в обычном API.

Коротко для собеседования

Server Actions позволяют вызывать серверный код из формы, но остаются обычным endpoint, поэтому проверки доступа и валидация обязательны.

Другие вопросы раздела