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:
- 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' };
}
}
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贸nsaveMessagedefinida 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 (
);
}
Explicaci贸n:
- La directiva
'use client'especifica que se trata de un Componente Cliente (ya que est谩 usandouseFormState). useFormState(createMessage, {message: ''})inicializa el estado del formulario con la Acci贸n del ServidorcreateMessage. El segundo argumento es el estado inicial.- La propiedad
actiondel elementoformse establece enformActiondevuelto poruseFormState. - La variable
statecontiene 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');
// ...
}
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:
- 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,
createCommentoupdateUserProfileson mejores que nombres gen茅ricos comoprocessData. - 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...catchpara 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
Intlpara formatear las fechas y horas de acuerdo con la configuraci贸n regional del usuario. - Gestionar diferentes formatos num茅ricos: Usa la API
Intlpara formatear los n煤meros de acuerdo con la configuraci贸n regional del usuario. - Gestionar diferentes divisas: Usa la API
Intlpara 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.