Lecciones del curso
Intro a las aplicaciones Fullstack con React y Remix
Remix elimina por completo la necesidad de manejar un estado en el cliente (Client State Management).
Manteniendo la interfaz sincronizada con un estado persistente que vive solo en el servidor, usando la base de datos (o datos del servidor) como estado. Eliminando por completo la necesidad de mantener un estado en el cliente (el navegador). 🤯
Remix define su propuesta como el Fullstack Data Flow. Este flujo está compuesto por tres etapas:
- La función
loader
de una ruta, es la encargada de proveer los datos a la interfaz del cliente. - Los formularios HTML hacen POST con los datos, a la función
action
de la ruta. - Los datos que entrega el
loader
en la página son revalidados automáticamente.
!https://remix.run/blog-images/posts/remix-data-flow/loader-action-component.png
En Remix, las rutas son solo un archivo dentro de la carpeta /routes
. 🤯
Estos archivos pueden exportar varias funciones que Remix utilizará según el nombre que posean:
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
🧵 Función loader de la ruta
Los archivos de rutas pueden exportar una función asíncrona llamada loader
.
Esta función se encarga de conseguir los datos que la interfaz necesita, ya sea desde una API, una base de datos o cookies.
Cuando un usuario visita la página, esta función loader
es ejecutada primero, cargando los datos, para luego renderizar el maquetado con estos datos. 😯
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Esto asegura que los datos están listos para ser usados por la interfaz, evitando así el consumo de una API desde el cliente. 🤯
🧱 El componente de la ruta
Este componente debe ser exportado como default, pues será el componente que se muestra cuando la página se abre en el navegador. Los datos que el loader
ha conseguido previamente, están disponibles en el Hook useLoaderData()
.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
De esta forma se consigue que el primer render (first meaningful paint) sea una página HTML pre-renderizada que además es prácticamente instantánea y siempre funcional.🔥
También conseguimos con el generic: <typeof loader>
tipado seguro de punto a punto, sacándole el máximo provecho a nuestro TypeScript. ✅
Función action de la ruta 🚦
Cuando a un Formulario se le hace submit, la función action
es ejecutada.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Remix envía los datos del formulario a la función action
. Una vez que ha terminado su ejecución, la función loader
es revalidada, para conseguir el nuevo estado del servidor. Así, el componente no tiene que encargarse de mantener actualizado ningún estado local.
¿Genial no? 😎
⚠️ Es importante notar que los atributos name de los inputs HTML, serán las llaves en el formData.
Así, la interfaz del cliente siempre está sincronizada con el estado del servidor sin tener que ocuparnos de ello.
Ya no hace falta mantener ningún estado en el cliente, pues Remix se encarga de revalidar los datos que se están usando en el componente de React y de actualizarlos una vez que el action
ha terminado.
Una vez que pruebas construir un sitio web con Remix, quedas enganchado(a) a su simplicidad, y todo te parece posible, tu imaginación comienza a volar, y lo mejor, es que te puedes concentrar en crear buenas experiencias para tus usuarios; en vez de perder el tiempo manteniendo dos o más repos y múltiples servidores, tener que reescribir tu aplicación con cada actualización del framework o mantener un Redux descomunal y monstruoso. 🧌 Olvídate de todo eso, solo tienes que construir una aplicación Fullstack con Remix. 🙏🏽🕊️
Abrazo.
Bliss. 🤓
Enlaces Relacionados
First Meaningful Paint
https://developer.chrome.com/docs/lighthouse/performance/first-meaningful-paint/