Mejora progresiva con Server Actions

La mejora progresiva es una estrategia de desarrollo web en la que se comienza con una base funcional de HTML y se añaden capacidades de JavaScript por capas. La funcionalidad principal funciona para todos los usuarios, incluidos quienes tienen JavaScript deshabilitado, conexiones lentas o utilizan tecnologías de asistencia, mientras que quienes tienen JavaScript habilitado obtienen una experiencia mejorada.

Un formulario con action={serverAction} funciona como un POST de HTML de página completa incluso sin JavaScript. El navegador envía el formulario, el servidor ejecuta la acción y devuelve una página HTML actualizada. Este es el mismo mecanismo que impulsa los formularios web desde 1995; las Server Actions de React son compatibles con él por diseño.

Cuando no hay JavaScript, la validación debe realizarse en el servidor. La Server Action valida los datos del formulario y, si la validación falla, devuelve el estado de error. El servidor vuelve a renderizar la página con los mensajes de error incluidos en el HTML. El usuario ve los errores sin que se ejecute JavaScript en el cliente.

Cuando React hidrata la página, intercepta los envíos de formularios y los gestiona como llamadas asíncronas a Server Actions en lugar de realizar POST de página completa. El usuario obtiene una actualización en el mismo lugar sin recargar la página, un estado pendiente visible y una UI optimista, todo ello sin cambiar la acción ni la estructura subyacentes del formulario.

El servidor renderiza el formulario con el estado inicial incluido en el HTML. Cuando React se hidrata, recupera ese estado inicial sin provocar parpadeos ni discrepancias. El hook useActionState está diseñado para conciliar correctamente el estado inicial renderizado en el servidor con la hidratación en el cliente.

Las transiciones de React permiten que la UI siga siendo interactiva durante una llamada a una Server Action. Envolver el envío del formulario en una transición permite que React dé menor prioridad a la comunicación con el servidor y mantenga la página receptiva. Esto hace que la experiencia mejorada con JavaScript parezca mucho más rápida que una recarga de página completa.

Sin JavaScript: el usuario hace clic en enviar, el navegador envía un POST de página completa, el servidor responde con una página HTML nueva (incluye un breve destello blanco y reinicia la posición de desplazamiento). Con JavaScript: React intercepta el envío, la acción se ejecuta de forma asíncrona y solo las partes modificadas de la página se actualizan en el mismo lugar, sin destello ni reinicio de la posición de desplazamiento.

La mejora progresiva beneficia a los rastreadores de los motores de búsqueda, que quizá no ejecuten JavaScript. Una página de búsqueda o filtrado basada en formularios que funciona como un formulario HTML de página completa se puede indexar y rastrear. Los resultados renderizados en el servidor permiten que el rastreador vea contenido real, no divs vacíos esperando a que se ejecute JavaScript.

Los lectores de pantalla y las tecnologías de asistencia funcionan mejor con HTML semántico. Un formulario mejorado progresivamente utiliza elementos reales como <form>, <input> y <button>, que las tecnologías de asistencia entienden de forma nativa. JavaScript añade regiones activas de ARIA para anunciar los errores, mejorando la base accesible en lugar de sustituirla.

En redes poco fiables, es posible que los paquetes de JavaScript no se carguen. Una página mejorada progresivamente sigue funcionando para el caso de uso básico. Esta resiliencia es especialmente importante para los usuarios con conexiones móviles en zonas con poca cobertura o en regiones donde las condiciones de red varían mucho.

La mejora progresiva es más valiosa para formularios públicos: registro, contacto, búsqueda y proceso de pago. Es posible que los paneles internos con interactividad compleja no la necesiten. Aplíquela de forma intencionada donde sean importantes el máximo alcance y la fiabilidad, como en páginas de marketing, comercio electrónico y flujos de incorporación de usuarios.

¿Cuál es el principio fundamental de la mejora progresiva?

La mejora progresiva significa que el formulario funciona como un POST de HTML simple sin JavaScript. Las Server Actions lo admiten de forma nativa: action={serverAction} habilita el envío mediante un POST de página completa. Después, la hidratación de React transforma el formulario en actualizaciones asíncronas en el mismo lugar, con estados pendientes. Este enfoque beneficia la accesibilidad, el SEO y a los usuarios con conectividad limitada, y al mismo tiempo ofrece una experiencia enriquecida con JavaScript.