Что такое 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, поэтому проверки доступа и валидация обязательны.