Server Actions en React 19 y Next.js

Las Server Actions son funciones asíncronas que se ejecutan en el servidor, no en el navegador. Se marcan con la directiva 'use server', ubicada al principio del archivo o del cuerpo de la función, lo que indica al framework que esta función nunca debe ejecutarse en el lado del cliente.

Como Server Actions se ejecutan en el servidor, tienen acceso a todo el contexto del servidor: conexiones de base de datos, secretos del entorno, datos de sesión y recursos del sistema de archivos. Esto es fundamentalmente diferente de los componentes de cliente, que solo pueden acceder a lo que expone el navegador.

Cuando un componente de cliente llama a un Server Action, Next.js realiza automáticamente una solicitud HTTP POST a un endpoint RSC especial. El framework gestiona toda la serialización de los argumentos y la capa de transporte, por lo que nunca tendrá que escribir manualmente llamadas a fetch() para estas mutaciones.

En muchos escenarios de mutación, Server Actions sustituyen la necesidad de utilizar rutas de API. La propia acción es el endpoint: se define la lógica una sola vez como una función del servidor y se llama directamente desde el componente de cliente como si fuera una función local.

Server Actions surgieron inicialmente como un concepto específico de Next.js, pero React 19 los eleva a una funcionalidad de primera clase de React. Esto significa que otros bundlers y frameworks distintos de Next.js pueden implementar el mismo patrón siguiendo la especificación de React.

Server Actions son experimentales en React 19 RC, pero son estables en el App Router de Next.js 14 y versiones posteriores desde su introducción. Si está desarrollando hoy una aplicación para producción con el App Router de Next.js, Server Actions son un patrón totalmente compatible y recomendado.

Una de las propiedades de seguridad más importantes de Server Actions es que los secretos nunca llegan al navegador. Las variables de entorno, como las contraseñas de bases de datos y las claves de API utilizadas dentro de un Server Action, nunca se incluyen en el bundle del cliente, porque el cuerpo de la función nunca se envía al navegador.

Los elementos de formulario HTML aceptan directamente un Server Action mediante el atributo action: <form action={myServerAction}>. React intercepta el envío del formulario y llama al Server Action con los datos del formulario, lo que permite realizar mutaciones en el servidor sin necesidad de configurar lógica auxiliar de JavaScript en el cliente.

Cuando se activa un Server Action, React serializa los argumentos de la acción en el cuerpo de una solicitud POST. El servidor los deserializa, ejecuta la función, serializa el valor devuelto y lo envía de vuelta. Solo los valores serializables (cadenas, números, matrices y objetos simples) pueden cruzar esta frontera.

Puede definir un Server Action a nivel de módulo en un archivo que contenga 'use server' al principio, o de forma integrada dentro de un componente de servidor colocando 'use server' al principio de la función asíncrona. Ambos enfoques producen el mismo resultado: una función invocable que solo se ejecuta en el servidor.

Los componentes de cliente importan y llaman a Server Actions igual que a funciones asíncronas normales. La sintaxis de llamada es idéntica a la de una llamada a una función asíncrona local, pero la ejecución ocurre completamente en el servidor. Esta abstracción mantiene los componentes de cliente limpios y libres de código repetitivo de fetch.

¿Cuál de las siguientes opciones describe mejor el modelo de seguridad de Server Actions?

Server Actions son funciones asíncronas del lado del servidor marcadas con 'use server'. Mantienen acceso al contexto del servidor, como las conexiones de base de datos y los secretos del entorno. Next.js gestiona automáticamente el transporte HTTP, y React 19 los convierte en una funcionalidad independiente del framework. Los formularios pueden utilizarlos directamente mediante el atributo action, y los secretos que contienen nunca llegan al navegador.