React Server Actions: Procesamiento de formularios del lado del servidor simplificado

React Server Actions, introducidas en React 18 y significativamente mejoradas en Next.js, ofrecen un enfoque revolucionario para gestionar los envíos de formularios y las mutaciones de datos directamente en el servidor. Esta potente función simplifica el proceso de desarrollo, mejora la seguridad y optimiza el rendimiento en comparación con la captura y manipulación de datos tradicionales del lado del cliente.

¿Qué son React Server Actions?

Las Acciones del Servidor son funciones asíncronas que se ejecutan en el servidor y pueden invocarse directamente desde los componentes de React. Permiten realizar tareas del lado del servidor, como:

• Envíos de formularios: Procesar los datos del formulario de forma segura en el servidor.
• Mutaciones de datos: Actualizar bases de datos o API externas.
• Autenticación: Gestionar los inicios de sesión y el registro de usuarios.
• Lógica del lado del servidor: Ejecutar una lógica de negocio compleja sin exponerla al cliente.

La principal ventaja de las Acciones del Servidor es que permiten escribir código del lado del servidor dentro de tus componentes de React, eliminando la necesidad de rutas de API separadas y una lógica compleja de obtención de datos del lado del cliente. Esta co-localización de la interfaz de usuario y la lógica del lado del servidor conduce a una base de código más mantenible y eficiente.

Beneficios de usar React Server Actions

Usar React Server Actions proporciona varios beneficios significativos:

Desarrollo simplificado

Las Acciones del Servidor reducen el código repetitivo al permitirte gestionar los envíos de formularios y las mutaciones de datos directamente dentro de tus componentes de React. Esto elimina la necesidad de endpoints de API separados y una lógica compleja de obtención de datos del lado del cliente, agilizando el proceso de desarrollo y haciendo que tu código sea más fácil de entender y mantener. Considera un formulario de contacto simple. Sin las Acciones del Servidor, necesitarías una ruta de API separada para gestionar el envío del formulario, JavaScript del lado del cliente para enviar los datos y una lógica de manejo de errores tanto en el cliente como en el servidor. Con las Acciones del Servidor, todo esto se puede gestionar dentro del propio componente.

Seguridad mejorada

Al ejecutar código en el servidor, las Acciones del Servidor reducen la superficie de ataque de tu aplicación. Los datos sensibles y la lógica de negocio se mantienen alejados del cliente, lo que impide que usuarios malintencionados los manipulen. Por ejemplo, las credenciales de la base de datos o las claves de API nunca se exponen en el código del lado del cliente. Todas las interacciones con la base de datos ocurren en el servidor, mitigando el riesgo de inyección SQL o acceso no autorizado a los datos.

Rendimiento mejorado

Las Acciones del Servidor pueden mejorar el rendimiento al reducir la cantidad de JavaScript que debe descargarse y ejecutarse en el cliente. Esto es particularmente beneficioso para los usuarios con dispositivos de baja potencia o con conexiones a Internet lentas. El procesamiento de datos ocurre en el servidor, y solo las actualizaciones de la interfaz de usuario necesarias se envían al cliente, lo que resulta en cargas de página más rápidas y una experiencia de usuario más fluida.

Actualizaciones optimistas

Las Acciones del Servidor se integran a la perfección con Suspense y Transitions de React, lo que permite actualizaciones optimistas. Las actualizaciones optimistas te permiten actualizar la interfaz de usuario inmediatamente, incluso antes de que el servidor haya confirmado la acción. Esto proporciona una experiencia de usuario más receptiva e interactiva, ya que los usuarios no tienen que esperar a que el servidor responda antes de ver los resultados de sus acciones. En el comercio electrónico, agregar un artículo a un carrito de compras se puede mostrar inmediatamente mientras el servidor confirma la adición en segundo plano.

Mejora progresiva

Las Acciones del Servidor admiten la mejora progresiva, lo que significa que tu aplicación puede seguir funcionando incluso si JavaScript está deshabilitado o no se puede cargar. Cuando JavaScript está deshabilitado, los formularios se enviarán como formularios HTML tradicionales, y el servidor se encargará del envío y redirigirá al usuario a una nueva página. Esto garantiza que tu aplicación siga siendo accesible para todos los usuarios, independientemente de la configuración de su navegador o de las condiciones de la red. Esto es especialmente importante para la accesibilidad y el SEO.

Cómo usar React Server Actions

Para usar React Server Actions, necesitarás usar un framework que las admita, como Next.js. Aquí tienes una guía paso a paso:

1. Definir la Acción del Servidor

Crea una función asíncrona que se ejecutará en el servidor. Esta función debe gestionar la lógica que deseas ejecutar en el servidor, como actualizar una base de datos o llamar a una API. Marca la función con la directiva "use server" en la parte superior para indicar que es una Acción del Servidor. Esta directiva le dice al compilador de React que trate la función como una función del lado del servidor y que gestione automáticamente la serialización y deserialización de datos entre el cliente y el servidor.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

Explicación:

• La directiva 'use server' marca esta función como una Acción del Servidor.
• revalidatePath('/') borra la caché de la ruta, garantizando que los datos actualizados se obtengan en la siguiente solicitud. Esto es crucial para mantener la consistencia de los datos.
• saveMessage(message) es un marcador de posición para tu lógica de interacción real con la base de datos. Se asume que tienes una función saveMessage definida en otro lugar para gestionar el guardado del mensaje en tu base de datos.
• La función devuelve un objeto de estado que se puede usar para mostrar comentarios al usuario.

2. Importar y usar la Acción del Servidor en tu componente

Importa la Acción del Servidor en tu componente de React y úsala como la propiedad action en un elemento de formulario. El hook useFormState se puede usar para gestionar el estado del formulario y mostrar comentarios al usuario.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Explicación:

• La directiva 'use client' especifica que se trata de un Componente Cliente (ya que está usando useFormState).
• useFormState(createMessage, {message: ''}) inicializa el estado del formulario con la Acción del Servidor createMessage. El segundo argumento es el estado inicial.
• La propiedad action del elemento form se establece en formAction devuelto por useFormState.
• La variable state contiene el valor de retorno de la Acción del Servidor, que se puede usar para mostrar comentarios al usuario.

3. Gestionar los datos del formulario

Dentro de la Acción del Servidor, puedes acceder a los datos del formulario usando la API FormData. Esta API proporciona una forma conveniente de acceder a los valores de los campos del formulario.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}
            

              
                Copy
              
            
          

4. Gestionar los errores

Usa bloques try...catch para gestionar los errores que pueden ocurrir durante la ejecución de la Acción del Servidor. Devuelve un mensaje de error en el objeto de estado para mostrarlo al usuario.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

5. Revalidar los datos

Después de que una Acción del Servidor haya mutado los datos correctamente, es posible que debas revalidar la caché de datos para garantizar que la interfaz de usuario refleje los últimos cambios. Usa las funciones revalidatePath o revalidateTag de next/cache para revalidar rutas o etiquetas específicas.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}
            

              
                Copy
              
            
          

Uso avanzado

Mutar datos

Las Acciones del Servidor son particularmente adecuadas para mutar datos, como actualizar bases de datos o API externas. Puedes usar las Acciones del Servidor para gestionar mutaciones de datos complejas que requieren lógica del lado del servidor, como validar datos, realizar cálculos o interactuar con múltiples fuentes de datos. Considera un escenario en el que necesitas actualizar el perfil de un usuario y enviar un correo electrónico de confirmación. Una Acción del Servidor puede gestionar tanto la actualización de la base de datos como el proceso de envío de correo electrónico en una sola operación atómica.

Autenticación y autorización

Las Acciones del Servidor se pueden usar para gestionar la autenticación y la autorización. Al realizar comprobaciones de autenticación y autorización en el servidor, puedes asegurarte de que solo los usuarios autorizados tengan acceso a datos y funcionalidades confidenciales. Puedes usar las Acciones del Servidor para gestionar los inicios de sesión, el registro y el restablecimiento de contraseñas de los usuarios. Por ejemplo, una Acción del Servidor puede verificar las credenciales del usuario contra una base de datos y devolver un token que se puede usar para autenticar las solicitudes posteriores.

Funciones Edge

Las Acciones del Servidor se pueden desplegar como Funciones Edge, que se ejecutan en una red global de servidores cerca de tus usuarios. Esto puede reducir significativamente la latencia y mejorar el rendimiento, especialmente para los usuarios en ubicaciones geográficamente dispersas. Las Funciones Edge son ideales para gestionar las Acciones del Servidor que requieren baja latencia, como actualizaciones de datos en tiempo real o la entrega de contenido personalizado. Next.js proporciona soporte integrado para desplegar las Acciones del Servidor como Funciones Edge.

Streaming

Las Acciones del Servidor admiten el streaming, lo que te permite enviar datos al cliente en fragmentos a medida que están disponibles. Esto puede mejorar el rendimiento percibido de tu aplicación, especialmente para las Acciones del Servidor que tardan mucho tiempo en ejecutarse. El streaming es particularmente útil para gestionar grandes conjuntos de datos o cálculos complejos. Por ejemplo, puedes transmitir los resultados de la búsqueda al cliente a medida que se recuperan de la base de datos, proporcionando una experiencia de usuario más receptiva.

Mejores prácticas

Aquí tienes algunas de las mejores prácticas a seguir al usar React Server Actions:

• Mantén las Acciones del Servidor pequeñas y enfocadas: Cada Acción del Servidor debe realizar una única tarea bien definida. Esto hace que tu código sea más fácil de entender, probar y mantener.
• Usa nombres descriptivos: Elige nombres que indiquen claramente el propósito de la Acción del Servidor. Por ejemplo, createComment o updateUserProfile son mejores que nombres genéricos como processData.
• Valida los datos en el servidor: Siempre valida los datos en el servidor para evitar que usuarios malintencionados inyecten datos no válidos en tu aplicación. Esto incluye validar los tipos de datos, los formatos y los rangos.
• Gestiona los errores con elegancia: Usa bloques try...catch para gestionar los errores y proporcionar mensajes de error informativos al usuario. Evita exponer información de error confidencial al cliente.
• Usa actualizaciones optimistas: Proporciona una experiencia de usuario más receptiva actualizando la interfaz de usuario inmediatamente, incluso antes de que el servidor haya confirmado la acción.
• Revalida los datos según sea necesario: Asegúrate de que la interfaz de usuario refleje los últimos cambios revalidando la caché de datos después de que una Acción del Servidor haya mutado los datos.

Ejemplos del mundo real

Consideremos algunos ejemplos del mundo real de cómo se pueden usar React Server Actions en diferentes tipos de aplicaciones:

Aplicación de comercio electrónico

• Agregar un artículo al carrito de compras: Una Acción del Servidor puede gestionar la adición de un artículo al carrito de compras del usuario y la actualización del total del carrito en la base de datos. Se pueden usar actualizaciones optimistas para mostrar inmediatamente el artículo en el carrito.
• Procesar un pago: Una Acción del Servidor puede gestionar el procesamiento de un pago utilizando una pasarela de pago de terceros. La Acción del Servidor también puede actualizar el estado del pedido en la base de datos y enviar un correo electrónico de confirmación al usuario.
• Enviar una reseña de producto: Una Acción del Servidor puede gestionar el envío de una reseña de producto y guardarla en la base de datos. La Acción del Servidor también puede calcular la calificación promedio del producto y actualizar la página de detalles del producto.

Aplicación de redes sociales

• Publicar un nuevo tweet: Una Acción del Servidor puede gestionar la publicación de un nuevo tweet y guardarlo en la base de datos. La Acción del Servidor también puede actualizar la línea de tiempo del usuario y notificar a sus seguidores.
• Dar me gusta a una publicación: Una Acción del Servidor puede gestionar dar me gusta a una publicación y actualizar el recuento de me gusta en la base de datos. Se pueden usar actualizaciones optimistas para mostrar inmediatamente el recuento de me gusta actualizado.
• Seguir a un usuario: Una Acción del Servidor puede gestionar seguir a un usuario y actualizar los recuentos de seguidores y seguidos en la base de datos.

Sistema de gestión de contenido (CMS)

• Crear una nueva entrada de blog: Una Acción del Servidor puede gestionar la creación de una nueva entrada de blog y guardarla en la base de datos. La Acción del Servidor también puede generar un slug para la entrada y actualizar el mapa del sitio.
• Actualizar una página: Una Acción del Servidor puede gestionar la actualización de una página y guardarla en la base de datos. La Acción del Servidor también puede revalidar la caché de la página para garantizar que el contenido actualizado se muestre a los usuarios.
• Publicar un cambio: Una Acción del Servidor puede gestionar la publicación de un cambio en la base de datos y notificar a todos los suscriptores.

Consideraciones de internacionalización

Al desarrollar aplicaciones para una audiencia global, es esencial considerar la internacionalización (i18n) y la localización (l10n). Aquí hay algunas consideraciones para usar React Server Actions en aplicaciones internacionalizadas:

• Gestionar diferentes formatos de fecha y hora: Usa la API Intl para formatear las fechas y horas de acuerdo con la configuración regional del usuario.
• Gestionar diferentes formatos numéricos: Usa la API Intl para formatear los números de acuerdo con la configuración regional del usuario.
• Gestionar diferentes divisas: Usa la API Intl para formatear las divisas de acuerdo con la configuración regional del usuario.
• Traducir los mensajes de error: Traduce los mensajes de error al idioma del usuario.
• Admitir idiomas de derecha a izquierda (RTL): Asegúrate de que tu aplicación sea compatible con idiomas RTL, como el árabe y el hebreo.

Por ejemplo, al procesar un formulario que requiere una entrada de fecha, una Acción del Servidor puede usar la API Intl.DateTimeFormat para analizar la fecha de acuerdo con la configuración regional del usuario, garantizando que la fecha se interprete correctamente independientemente de la configuración regional del usuario.

Conclusión

Las React Server Actions son una herramienta poderosa para simplificar el procesamiento de formularios del lado del servidor y las mutaciones de datos en las aplicaciones React. Al permitirte escribir código del lado del servidor directamente dentro de tus componentes de React, las Acciones del Servidor reducen el código repetitivo, mejoran la seguridad, mejoran el rendimiento y permiten actualizaciones optimistas. Al seguir las mejores prácticas descritas en esta guía, puedes aprovechar las Acciones del Servidor para construir aplicaciones React más robustas, escalables y mantenibles. A medida que React continúa evolucionando, las Acciones del Servidor sin duda jugarán un papel cada vez más importante en el futuro del desarrollo web.