Серверные действия в React 19 и Next.js

Серверные действия — это асинхронные функции, выполняющиеся на сервере, а не в браузере. Они помечаются директивой 'use server', размещённой в начале файла или в начале тела функции, чтобы сообщить фреймворку, что эта функция никогда не должна выполняться на стороне клиента.

Поскольку серверные действия выполняются на сервере, у них есть доступ ко всему серверному контексту: подключениям к базе данных, секретам окружения, данным сеанса и ресурсам файловой системы. Это принципиально отличается от клиентских компонентов, которым доступно только то, что предоставляет браузер.

Когда клиентский компонент вызывает серверное действие, Next.js автоматически отправляет HTTP-запрос POST на специальную конечную точку RSC. Фреймворк берет на себя сериализацию всех аргументов и транспортный уровень, поэтому Вам не нужно вручную писать вызовы получения данных для таких операций изменения данных.

Серверные действия во многих сценариях изменения данных заменяют маршруты API. Само действие является конечной точкой: Вы определяете логику один раз в виде серверной функции, а затем вызываете ее непосредственно из клиентского компонента, как локальную функцию.

Изначально серверные действия были концепцией, специфичной для Next.js, но React 19 сделал их полноценной возможностью React. Это означает, что сборщики и фреймворки, отличные от Next.js, могут реализовать тот же подход в соответствии со спецификацией React.

В React 19 RC серверные действия являются экспериментальными, но в маршрутизаторе приложения Next.js 14+ они стабильны с момента появления. Если сегодня Вы создаете рабочее приложение с маршрутизатором приложения Next.js, серверные действия являются полностью поддерживаемым и рекомендуемым подходом.

Одно из важнейших свойств безопасности серверных действий заключается в том, что секреты никогда не попадают в браузер. Переменные окружения, такие как пароли базы данных и ключи API, используемые внутри серверного действия, никогда не включаются в клиентскую сборку, поскольку тело функции не отправляется в браузер.

Элементы формы HTML напрямую принимают серверное действие через атрибут action: <form action={myServerAction}>. React перехватывает отправку формы и вызывает серверное действие с данными формы, обеспечивая изменение данных на сервере без дополнительной клиентской логики на JavaScript.

При вызове серверного действия React сериализует его аргументы в тело запроса POST. Сервер десериализует их, выполняет функцию, сериализует возвращаемое значение и отправляет его обратно. Через эту границу могут передаваться только сериализуемые значения: строки, числа, массивы и простые объекты.

Вы можете определить серверное действие на уровне модуля в файле, поместив в его начало 'use server', или встроить его в серверный компонент, поместив 'use server' в начало асинхронной функции. Оба подхода дают один и тот же результат: вызываемую только на сервере функцию.

Клиентские компоненты импортируют и вызывают серверные действия так же, как обычные асинхронные функции. Синтаксис вызова идентичен вызову локальной асинхронной функции, но выполнение полностью происходит на сервере. Эта абстракция позволяет сделать клиентские компоненты чистыми и избавить их от шаблонного кода для получения данных.

Какое из следующих утверждений лучше всего описывает модель безопасности серверных действий?

Серверные действия — это асинхронные функции на стороне сервера, отмеченные с помощью 'use server'. Они замыкают серверный контекст, например подключения к базе данных и секреты окружения. Next.js автоматически обрабатывает транспорт HTTP, а React 19 превращает их в возможность, не зависящую от фреймворка. Формы могут напрямую использовать их через атрибут действия, а содержащиеся в них секреты никогда не попадают в браузер.