Mejorando Formularios con React Server Components

Mi nombre es Aurora. Soy desarrolladora web de Noruega, y trabajo como consultora en Oslo, y estoy construyendo activamente con componentes de React en mi proyecto, y ahí es donde trato de obtener mi conocimiento y hacer algunos ejemplos para ayudar a enseñar a otras personas sobre eso.

¿Cuántas personas usan componentes de servidor de React aquí? Bien, bastantes. Wow, eso es bueno, eso es bueno. Genial.

Estoy emocionada de estar demostrando un ejemplo práctico de trabajo con formularios y componentes de servidor aquí hoy, y voy a codificar algo que está basado o inspirado en una característica que construí en mi proyecto actual. Así que vamos directo a ello.

Así que la configuración aquí es un curso de enrutador de XGS, y está usando Prisma como un ORM y una base de datos local y Tailwind para CSS. Soy una gran fan de Tailwind. Y vamos a revisar los archivos iniciales aquí.

Así que como estamos en el enrutador de la aplicación, todo es un componente de servidor por defecto, ¿verdad? Y eso significa que todos estos componentes aquí son, wow, okay, son componentes de servidor por defecto. Y eso significa que realmente puedo hacerlos asíncronos. Así que los componentes de servidor pueden ser asíncronos, y realmente puedo obtener datos de forma asíncrona justo dentro del propio componente.

Y aquí tengo un cuadro de mensajes, y está obteniendo mensajes de la base de datos directamente a través de Prisma. Y luego también hay un componente de visualización de mensajes aquí, o estoy mapeando los mensajes a componentes de visualización de mensajes. Y aquí, todo lo que necesitamos hacer es simplemente estilizar basado en si el mensaje está escrito por el usuario. Así que solo un componente de servidor, nada especial aquí.

Y también hay una entrada de mensaje, y ese es este formulario aquí, y no hace nada ahora mismo. Es solo un formulario con una sola entrada, y lo probaré aquí. Así que no va a pasar nada.

Así que todo esto es componente de servidor, lo que significa que no hay JS añadido al paquete del cliente para ninguno de estos componentes. Y vamos a mejorar esto con React 19. El objetivo será hacer esto interactivo, mientras minimizamos el JS en el cliente y reducimos la complejidad del front-end. Y comencemos simplemente haciendo que el formulario funcione. Así que voy a usar la extensión de React 19 del elemento de formulario para vincular la propiedad de acción a una función. Esto es algo que podemos hacer con React 19 ahora.

Y React 19 fue lanzado como la semana pasada, hace dos semanas, finalmente, después de estar en RC por como medio año. Así que, whoo. Sí, eso es agradable. Sí.

De todos modos, podemos vincular a una función aquí. Así que voy a vincular a submit message y voy a crear una función de servidor. Así que lo haré aquí en mi capa de acceso a datos. Solo diré submit message TS. Y como voy a hacer una función de servidor, usaré la directiva de React 19, use server. Y lo que esto significa es que cada función en este archivo será invocable como código de servidor, pero invocable desde el cliente. Y tendremos un endpoint de API oculto generado automáticamente. Así que vamos a exportar una función asíncrona aquí, que es submit message, si puedo deletrear función. Eso es algo bueno si puedo hacer una función. Ahí vamos. Y esto tomará un objeto de datos de formulario de tipo form data. Y lo que esto significa es que cada campo en este formulario se enviará con su valor dentro del objeto de datos de formulario. Y podemos usar esto para simplemente insertar en la base de datos usando Prisma, crear un mensaje donde los datos serán el contenido aquí. Solo lo obtendré de los datos del formulario. Lo tipificaremos como una cadena por ahora. Y también necesito un created by ID aquí. Y eso significa que de alguna manera necesito pasar un argumento adicional a esta función de servidor. Y hay un par de maneras en que podemos hacer esto. Podemos hacer como un dot bind. Esa es una manera. O podemos usar una entrada oculta. Así que aquí voy a usar una entrada oculta, vincularla al user ID, y puedo simplemente importar esta función de servidor aquí. Y ahora puedo obtener esto de los datos del formulario. Ahí vamos. Y tratemos de concluir esto aquí. Y tengo que añadir un poco de un descargo de responsabilidad aquí porque realmente no quieres pasar el user ID desde el lado del cliente. Eso es solo un ejemplo de cómo puedes pasar parámetros adicionales cuando te encuentras con eso. Así que querrías algún tipo de configuración de autenticación del lado del servidor. Pero esto está bien por ahora. Así que probémoslo.

Y digo, hey, y luego simplemente actualizaré manualmente la página aquí, y luego se ha enviado a la base de datos. Pero, por supuesto, no quiero actualizar manualmente la página. Así que puedo llamar a Next.js revalidate path con la ruta raíz para decir que Next.js debería purgar la caché del componente del servidor y regenerar todo en esta ruta. Para que cuando ahora lo intente de nuevo, no tenga que actualizar. Está ahí automáticamente.

Así que eso es todo lo que tuve que hacer para realmente enviar un formulario a la base de datos en el servidor con la función del servidor. Y esto es mucho más simple que usar mi onSubmit, prevent default, crear una ruta de API bla, bla, bla, bla, bla. Y, de hecho, onSubmit no funcionaría antes de que ocurra la hidratación de todos modos. Así que estamos obteniendo muchos beneficios de esto.

Pero una cosa que sucedió es que cuando envié este mensaje, estaba, como, en esta vista aquí. Y en realidad no pude ver el nuevo mensaje de inmediato. Y vamos a arreglar eso. Así que iré al cuadro de mensajes. Y simplemente reemplazaré este div aquí con un desplazador automático. Y este componente es un componente del cliente, porque realmente necesito JS del lado del cliente, porque estoy usando un efecto, un observador de imitación para desplazarse hasta el final del contenedor cuando hay un nuevo hijo insertado en la lista. Y esto requiere JS del lado del cliente. Pero como estoy pasando el contenido como un prop, en este caso, el prop de children, puedo realmente renderizar componentes del servidor dentro de esto. No los convierto en componentes del cliente. Así que aquí, estoy mapeando a message display. Probémoslo primero. Digamos, desplazarse. Así que está desplazándose. Está funcionando. Pero cuando reviso dentro de React DevTools, realmente podemos ver, ampliar esto un poco, que aquí tengo el desplazador como un componente normal de React, pero todos estos componentes de message display todavía son componentes del servidor. Y esta es una nueva característica en React DevTools. Puedes ver qué componentes son componentes del servidor, lo cual es bastante agradable. Así que ya estamos haciendo una optimización allí.

De acuerdo. Volvamos a la entrada del mensaje, porque estamos enviando algo del cliente al servidor, y realmente deberíamos estar validando esto. Así que para hacer eso, obtendré un resultado de un esquema de mensaje.

Y esto, bueno, podemos simplemente analizarlo de manera segura primero. Y simplemente moveré este objeto aquí. Y ya no necesito escribir estos como cadenas. Y podemos usar el resultado para introducir.

El esquema de mensaje está usando Zod para, en tiempo de ejecución, validar que el esquema o la ruta del objeto cumple con un cierto requisito. En este caso, el contenido debe tener un carácter de longitud, y el createdById debe ser un ID único. Y si esto falla, necesito manejarlo de alguna manera. Y por ahora, simplemente haré, si el resultado no es un éxito, podemos lanzar un nuevo error y simplemente decir datos de mensaje no válidos. Ahí vamos.

Y para probar esto, simplemente comentaré mi validación del lado del cliente. Y ahora, si envío un mensaje no válido, que es, ya sabes, cero caracteres, tendré este error lanzado. Y hay un montón de maneras de lidiar con errores. Una de ellas puede ser usando un error boundary. Así que puedo agregar un error boundary alrededor de la entrada del mensaje para capturar esto. Y lo haré en el cuadro de mensajes. Así que simplemente agregaré un error boundary aquí y lo envolveré alrededor de la entrada del mensaje. Sí, la auto-importación no está funcionando. Simplemente importemos el error boundary. Ahí vamos. Desde react-error-boundary. Y ahora, si tengo un mensaje no válido, será capturado adecuadamente por este error boundary. Y esto es solo una herramienta para desarrolladores de esa manera. Así que eso es bueno.

Pero en realidad, no quiero lanzar un error si la validación falló. Preferiría devolver algo. Así que en lugar de lanzar un error aquí, simplemente devolveré un success false. Y devolveré el error, que será lo mismo. Ups. Y también devolveremos una marca de tiempo. Y verás más tarde por qué necesito esto.

Dejémoslo así. Y crea esta marca de tiempo, así. Y como estamos en el servidor aquí, tal vez queramos hacer algo más. Tenemos acceso a la base de datos, consultar algo, decidir qué hacer a continuación. En mi caso, obtendré los mensajes para el usuario. Y usaré la misma función getMessages del componente anterior. Y simplemente usaré el ID del usuario. Y si los mensajes para el usuario son más de, digamos, cinco, entonces podemos simplemente devolver que el usuario ha alcanzado el número máximo de mensajes y success false y la marca de tiempo. Y si todo está bien, podemos insertar en la base de datos, validar la ruta y finalmente, devolver success true.

Y si tienes un formulario más grande con múltiples campos aquí, también puedes devolver la validación aquí, los errores de campo de validación y mostrarlos de alguna manera. Pero no necesito eso. Es solo un campo único. Pero tengo, oh, sí, y una cosa más. Si tengo un error en esta cosa de la base de datos, simplemente será un error boundary copiado. Así que eso no es algo de lo que deba preocuparme.

Ahora tengo mucha lógica del lado del servidor aquí. Y sería realmente bueno llevar esto a la entrada del mensaje y al usuario de alguna manera. Y podemos usar un nuevo hook de React 19 llamado useActionState para eso. Y useActionState toma una función para llamar, que será la acción, que simplemente pondrá el mensaje de envío aquí. Y toma un estado inicial. Y el estado inicial será simplemente success false. Ahí vamos. Y lo que nos devuelve es un estado de componente generado, que será igual primero al estado inicial. Y luego, después de eso, el último valor de retorno de la acción, que useActionState está envolviendo. Y también obtendremos una acción envuelta que podemos llamar submitMessageAction. Y luego podemos poner esto en el formulario. Y podemos usar el estado para mostrar el mensaje de error aquí debajo del formulario. Así que simplemente agregaré un mensaje de error aquí. Simplemente estilízalo con algo de texto rojo. Y todavía tengo un par de cosas aquí para arreglar porque, como describe el error, useActionState es un hook.

Necesito JS del lado del cliente para usar este hook. Y solo voy a decirle al bundler que cargue el JS para este componente con useClient. Y luego todavía tengo un error de TypeScript porque useActionState realmente pasa un parámetro adicional a la función que está envolviendo. Y es el estado anterior. Esto puede ser útil para otras cosas. Pero en este caso, no lo voy a usar. Así que lo dejaré ahí. Y le daré un tipo rápido. Ahí vamos.

Así que todo está bien. Veamos si funcionará. Oh, sí, pongamos esto de nuevo. Así que solo diré, hey. Y luego, hola. Y luego alcanzo este maxMessageCount. Y el error ha regresado de useActionState o de la función y useActionState. Y luego está en el estado ahora. Y podemos visualizar esto. Y eso es agradable. Pero estoy tratando de hacer que esto se sienta interactivo. Así que en lugar de solo usar este span aquí, haré un efecto en su lugar. Y si el estado regresa con un error, podemos hacer un toast de un error con ese error. Y vamos a cerrar esto y agregar la matriz de dependencias. Y depende del error, pero también de la marca de tiempo para que esto pueda volver a ejecutarse cada vez que la marca de tiempo cambie. Y ahí vamos. Y ahora, obtendremos un buen toast así, lo cual es mejor, lo que significa que no realmente necesito este mensaje de error aquí abajo más. Pero en lugar de eliminarlo, lo dejaré como un no script fallback para que por alguna razón si no hay JS, todavía tengamos una manera de saber qué salió mal.

OK. ¿Qué sigue? Bueno, cuando envío este formulario y obtengo un error, mi campo se reinicia. Y la razón por la que hace esto es porque con React 19 y el elemento de formulario con una propiedad de acción usando entradas no controladas, el formulario se reinicia automáticamente.

Y la razón de esto es que de alguna manera emula el comportamiento de envío de formularios de MK, por lo que es muy útil. Pero en este caso, no quiero reiniciar porque tal vez podría haberlo cambiado para que sea válido, ¿verdad? No siempre quiero reiniciar el formulario. Sí. Y tal vez estés acostumbrado a hacer un estado de formulario controlado como con Formic o Reactor form. Aquí solo estamos usando, ya sabes, entradas no controladas simples.

Pero para solucionar este problema, podemos volver al mensaje, enviar mensaje, y podemos devolver también el contenido o los datos que se enviaron. En este caso, es solo el contenido. Y luego podemos usar esto como el valor predeterminado de la entrada porque podemos hacer eso con entradas no controladas. Así que eso solo será el contenido. Así que ahora si el estado de acción o la acción aquí regresa con contenido, será el valor predeterminado. Veamos. Así que ahora el formulario ya no se está reiniciando allí.

Bien. ¿Qué más? Bueno, estoy usando una base de datos local aquí. Y en realidad, el viaje de ida y vuelta desde el servidor y de regreso probablemente no será tan rápido. Podría ser un poco lento aquí. Y ahora cuando estoy haciendo clic, no obtengo esta retroalimentación inmediata. Y si estás enviando un formulario, tal vez estarías enviando varias veces por accidente. Esto es algo que deberíamos manejar y hacerle saber al usuario que hicieron clic en el botón y están esperando algo. Así que afortunadamente el estado de acción realmente devuelve un tercer valor que está pendiente. Y podemos usar esto para deshabilitar el botón así y tal vez decir algo más como si está pendiente enviando de lo contrario envían. Y ahora mientras estoy esperando esto, obtendré este agradable estado pendiente aquí. Déjame volver a la versión válida. Solo voy a aumentar el conteo máximo de mensajes a ocho aquí. Y ahora tendremos este agradable estado de carga, reiniciar formulario, desplazarse todo bien. Así que eso es agradable. Pero lo que es genial de este formulario es que realmente funciona completamente sin JavaScript.

Así que voy a decir sin JavaScript. Como puedes ver, estoy obteniendo este spinner de favicon. No obtuve ningún feedback pendiente y no obtuve ningún desplazamiento, pero todo aún funcionó. Vamos a intentarlo de nuevo. Así que sí, todo el comportamiento predeterminado y hagámoslo de nuevo. Y luego alcanzamos este conteo máximo de mensajes y se renderiza el fallback de no script y tenemos nuestro valor predeterminado en el campo, lo cual es bastante genial.

Bien. Lo que esencialmente hemos estado haciendo aquí es mejorar progresivamente este formulario, lo que significa asegurar que toda la funcionalidad básica funcione al nivel más bajo de recursos y luego agregar cosas encima para mejorar la experiencia del usuario para los usuarios con estos recursos adicionales disponibles. Así que digamos que el usuario está en un dispositivo lento y está esperando que JS descargue partes y ejecute. Bueno, ahora este formulario realmente funcionará antes de que cualquiera de eso haya sucedido y asegurará que la hidratación de los componentes que queremos sea más rápida porque reducimos la cantidad de JS en el cliente con componentes del servidor y entrelazando el desplazador automático de esta manera.

Así que dependiendo de la situación del usuario, tendrán una mejor experiencia pero siempre tendrán un formulario que funcione. Bien. Sin embargo, no he terminado aquí porque quiero pasar un tiempo hablando sobre la reutilización de esto porque el patrón pendiente es agradable y tal vez lo quiera en otro lugar de mi aplicación. Tal vez en algún lugar que no use use action state. Así que lo que vamos a hacer es simplemente copiar este botón, cortar este botón y vamos a crear un botón de envío en su lugar y decir enviar aquí. Y voy a crear esto dentro de mi carpeta de componentes de UI aquí, botón de envío. Y simplemente haré un nuevo componente aquí y pegaré lo que tenía. Y necesito obtener esto como pendiente de algún lugar. Así que hay otro hook de React 19 que podemos usar para esto y es el use form status.

Y este hook devuelve un montón de cosas. Devuelve el pending, los datos enviados, la acción y el método utilizado. Pero solo voy a usar el pending aquí. Y está usando el formulario padre como proveedor para obtener estos valores. Así que solo añadiremos eso. Y como este es un hook, necesito convertirlo en un componente cliente nuevamente. Pero está bien. Es solo un pequeño componente manejando nuestra interactividad del lado del cliente aquí.

Y si está pending, no quiero decir enviando, preferiría renderizar un div con un spinner estilizado. Y pongamos también los hijos aquí. Y si no está pending, solo renderiza los hijos. Así que solo añadiré las props aquí rápidamente. Ahí vamos. Y añadir eso al componente. Y también puedes, si quieres reutilizar esto en un proyecto real, probablemente querrás extender las props del botón. O puedes añadir una carga adicional aquí para activar este bonito componente de una manera diferente. Pero para este ejemplo, lo haremos así.

Así que veamos si funcionará. Voy a importarlo aquí. Y luego probarlo. Así que ahora estoy obteniendo este bonito spinner. Y eso es agradable. Sin embargo, el poder de este componente es que realmente puedo poner esto en cualquier componente, incluso message box. Este es un componente del servidor. Y puedo simplemente pegarlo aquí. Tal vez quiera una nueva función. Reset. Puedo hacer un formulario con una acción. Reset messages. Y envolverlo alrededor del componente.

Y simplemente, muy rápidamente, crea una función de servidor en línea aquí. Va a ser una función de servidor con useServer. Va a ser lenta. Va a eliminar todos los mensajes de la base de datos. Y va a revalidar la ruta con la ruta raíz. Así que déjame importar esto. Así que recuerda, estoy en el servidor aquí. Este es un componente de servidor. Pero aunque lo soy, aún puedo hacer clic en esto y hacer que este botón maneje toda mi interactividad del lado del cliente, lo que significa que es completamente componible. Y este es realmente el poder de los componentes de servidor.

Permitir que componentes hoja más pequeños manejen tu interactividad por ti. Voy a saltar rápidamente a otra rama y mostrarte un hook más de React 19. Así que déjame simplemente descartar todo este código y saltar a una rama optimista aquí. Y no he hecho mucho aquí. Básicamente, todo lo que he hecho, bueno, he estado mejorando progresivamente esto aún más para hacerlo aún más interactivo.

Y he creado otro componente de mensajes. Este es ahora un componente cliente porque está usando el nuevo hook de React 19, useOptimistic. Y este hook toma un estado para mostrar cuando no hay acción pendiente, que es nuestra verdad del servidor, que son los mensajes aquí, y una función de actualización. Y esta función de actualización define que en la actualización optimista, el mensaje optimista tendrá un isSending establecido en true. Y nos devuelve los mensajes optimistas y una función para activar la actualización optimista. Y puedo pasar esto a mi entrada de mensaje.

Y aquí no he hecho mucho. Solo he añadido un onSubmit adicional para que si tenemos este JS disponible, ejecutemos esto. De lo contrario, podemos ejecutar la misma acción que antes. Y solo estoy haciendo transition, start adding optimistic message. Así que veamos cómo funciona esto. Así que ahora realmente puedo hacer actualizaciones optimistas. Y luego, la bandera de envío estará temporalmente disponible en este estado del cliente que estamos creando de manera optimista. Lo siento. Puedo hacer más.

Y lo que está sucediendo aquí es que a medida que el estado del servidor regresa, el estado del cliente se descarta. Y lo que sea que esté en el estado del servidor es entonces la verdad. Y puedo seguir enviando más hasta que eventualmente alcance mi límite máximo de mensajes aquí en algún momento. Y lo que sea que no exista, no existe en el estado del servidor, simplemente se revierte automáticamente, ¿verdad?

Porque lo que sea que esté sucediendo dentro de esta transición optimista es solo temporal y se descarta tan pronto como la transición se completa. Así que la conclusión aquí es que dependiendo de tu aplicación, ahora puedes decidir según tus requisitos y aún puedes usar React to form o formic si eso es lo que deseas. Pero React ahora proporciona otra opción y puedes usar estas características más primitivas de un formulario junto con React 19 y los componentes de React Server para hacer formularios muy robustos. Mientras mantienes una buena experiencia de usuario y experiencia de desarrollo.

Así que si quieres ver el código para esto, está en mi GitHub y la actualización optimista está en una rama. Así que eso es todo por mi charla. Muchas gracias.

Entonces, siendo el primer orador, ¿cómo te sientes después de tu charla? Siempre es bueno ser el primero y luego puedes relajarte y luego ver a todos los demás y luego mirarlos y estar estresado. Y sentirte bien de que ya no te sientes igual. Sí. Ahora solo un día tranquilo para el resto del día.

Así que tengo una pregunta para mí mismo. Me pregunto si hay alguna otra forma u otras bibliotecas que puedas usar para también optimizar formularios. Así que, por supuesto, tenemos las bibliotecas del lado del cliente como React to form y formic. Pero también hay algunas otras bibliotecas. Hay una llamada conform, que en realidad está usando use action state para darte todas estas características o beneficios mientras también proporciona esta validación a medida que escribes. Esa es una biblioteca que he estado revisando recientemente. Es realmente genial. De hecho, creo que fue originalmente hecha para Remix. Y acabo de ver una charla de React Alicante donde presentaban algo llamado Vest.js. Lo cual fue como, wow, esto está resolviendo tantos problemas con la validación y todo Así que hay muchas otras bibliotecas que probablemente seguirán mejorando ahora que tenemos estas características en React 19. Sí. Increíble.

¿Alguno de ustedes quiere lanzar una pregunta? Adelante. Quiero decir, ganarías una taza si estás... Bien. Tú. Hay una pregunta. ¿Puede alguien pasar el micrófono? ¿Si tenemos otro? ¿Puedes levantar la mano de nuevo, por favor? Bien. Lo siento. Bien. ¿Está funcionando? Bien. Sí. Perdón por sentarme en el lugar menos conveniente. Sí. Así que no he usado componentes del servidor en absoluto. Y como una cosa que realmente, supongo, me derrite el cerebro con eso es como llamar directamente a la base de datos en mi código de React.

¿Es este un patrón que usas actualmente en tus servicios de producción? ¿Y sientes que hay algún tipo de desventajas en eso, así como el tipo de notación de use server, use client? ¿Temes potencialmente filtrar algo? Entonces, si te preocupa filtrar cosas, probablemente el lugar donde lo encontrarías sería en funciones del servidor, si estás... Porque esto es esencialmente crear endpoints, y puedes acceder a ellos, puedes llamarlos. Así que necesitas tener cuidado con lo que envías de vuelta allí. Básicamente eso es todo.

Y hay un post en el blog sobre uno de los miembros principales de Versel. No sé cómo pronunciar su nombre. Es sobre Sebastian Markpacz. Algo así. No lo sé. Lo siento. Pero él tiene un post sobre seguridad con funciones del servidor. Porque ahí es donde cometerías un error, si fueras a cometer un error. Sí. Y en cuanto a la otra pregunta, como cómo es llamar dentro de tus componentes directamente, en mi proyecto real, tengo una API, así que estoy llamando a la API allí. Pero quiero decir, cuando estoy desarrollando con una base de datos directamente, no lo sé. No creo que haya mucho que pueda superar este DX y la velocidad a la que puedes desarrollar cosas. Depende de lo que estés haciendo. Pero sí. Y lleva algo de tiempo entenderlo. Pero una vez que lo haces, se siente muy natural. Sí.

Muchas gracias por tu respuesta. ¿Puedo preguntar tu nombre? Liam. Gracias, Liam, por tus preguntas. Me temo que estamos un poco fuera de tiempo para nuestra sesión de preguntas y respuestas. Pero ella estará disponible. Estaré aquí. Sí. Ella estará aquí en su lugar de preguntas y respuestas. Ven a hablar conmigo.

Sí. Justo después de esta charla. Así que pueden acercarse a ella y hacer más preguntas. También pueden hacer preguntas en Discord o Slido, si les funciona.

{{^}}Sí. Así que muchas gracias a todos. Gracias. Y gracias, Aurora. Muchas gracias.

Gracias. Gracias.