M

MLOG

Español

Explora React Server Actions, una potente función para gestionar envíos de formularios y mutaciones de datos directamente en el servidor, simplificando el desarrollo en React y mejorando la seguridad.

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:

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' };
  }
}

Explicación:

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 (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Explicación:

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');

  // ...
}

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' };
  }
}

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
  // ...
}

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:

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

Aplicación de redes sociales

Sistema de gestión de contenido (CMS)

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:

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.