El primer desafío es un simple hola mundo, comenzamos fácilmente. Así que intentamos usar la tecnología de React Server Components pero sin usar un servidor. Así que el desafío se llama React Serverless Components, este es nuestro primer significado para el acrónimo. Así que queremos crear un hola mundo muy simple, puedes verlo a la derecha, este es el resultado final. Y a la izquierda puedes encontrar un código muy simple que puedes ejecutar en un cliente, no necesitas un servidor para esto. Y este código lo que básicamente hace es algo que puedes hacer con la tecnología RSC, que es cargar algún contenido que está pre-generado en otro lugar, tal vez en un servidor, no lo sé, pero por ahora no nos importa el servidor.
Podemos obtener este contenido de algún lugar, luego podemos usar una nueva función que está disponible en React 19, en el paquete de React Server Components, obviamente, que se llama createFromFetch, que toma el contenido obtenido y lo decodifica de alguna manera para que pueda convertirse en algo que podamos renderizar desde React. También hay otra cosa que es nueva en React 19, una nueva característica en React 19, un nuevo hook llamado use, tal vez se les acabaron los nombres para los hooks, así que fueron por el más simple, se llama simplemente use. Puedes pensar que puedes usar todo con use, pero no es el caso, básicamente puedes usar cualquier tipo de recurso, llamémoslos, en particular por ahora, se usa para usar promesas y contexto, así que una forma simple de obtener algunos recursos remotos, promesas, y usarlos con una sintaxis sincrónica en lugar de usar async await y las cosas habituales.
Ahora que tenemos las cosas decodificadas, podemos renderizarlas usando el método de renderizado habitual de React DOM, no hay nada nuevo en ello, pero tal vez tengas curiosidad por entender qué es este contenido pre-generado del que estamos hablando. Es básicamente algo como esto. Este es un nuevo protocolo que el equipo de React introdujo con RSE, se llama ReactFlight, esta es la razón por la que te dije que recordaras la palabra flight, porque es importante. Es un protocolo que se usa para serializar cosas para que puedas enviarlas de un lugar a otro, por ejemplo de un servidor a un cliente, así que puedes generar el contenido en algún lugar, enviarlo a otro lugar, y usarlo por ejemplo para compartir el trabajo de renderizado entre un servidor y un cliente. Es similar a JSON pero no es realmente JSON, veremos un poco más cómo se ve más adelante. Así que con esto podemos imaginar un flujo de trabajo hecho como este, por ahora sabemos cómo deserializar este tipo de contenido, usando la función createFromPatch, aún no sabemos cómo serializar algo en el lado del servidor, lo veremos más adelante.
Bien, puedo decir que el primer desafío está completado, así que vamos rápidamente al segundo. No es realmente tan diferente, así que lo llamo el primer desafío y medio, porque no es realmente muy diferente del primero, así que no era bueno llamarlo segundo. El acrónimo en este caso se traduce como contenido estático reemplazable, porque queremos agregar un paso adicional, ¿qué pasa si queremos cargar más contenido diferente usando RSC, no solo una sola página, queremos cambiar entre diferentes tipos de contenido. Eso es absolutamente posible, el ejemplo es el que ves a la derecha. No te preocupes por el código, porque hay un repositorio de GitHub con todos los fragmentos de código que estoy mostrando, te daré el enlace más tarde.
Así que con este ejemplo no usamos nada nuevo de React 19, porque lo único que necesitamos hacer es usar el hook useState, por ejemplo, para almacenar nuestro contenido en algún lugar, como estamos acostumbrados a hacer. Por ejemplo, podemos almacenar el resultado de la función createFromPatch que hemos visto hemos visto en el ejemplo anterior, y simplemente pasarlo como una propiedad a un componente no raíz o un componente raíz, como en este caso, y usarlo allí. Así que nuestro componente raíz es en realidad un muy dinámico, porque no renderiza nada por sí mismo, solo obtiene el contenido de otro lugar.
Bien, algo más sobre react-flight, porque probablemente estamos curiosos, ya hemos visto que en react-flight podemos incluir alguna representación de nuestro DOM en una especie de sintaxis similar a JSON. No es realmente JSON pero se asemeja. Pero la otra cosa importante es que el contenido no se limita a solo una fila de cosas. Podemos tener muchas piezas que se llaman fragmentos, cada uno tiene un prefijo que es una clave asociada a este fragmento, porque una propiedad importante de react-flight es la capacidad de componer diferentes fragmentos juntos, y la forma en que los compones es referenciando otros fragmentos con esta sintaxis $key. Así que también react-flight es componible, como todas las bibliotecas de React aspiran a ser. Así que, ¿qué podemos pensar hacer con todas estas cosas que hemos visto hasta ahora? Tal vez generación de sitios estáticos, podemos generar nuestra carga útil de react-flight en algún lugar y usarla desde un cliente sin tener un servidor real disponible. Pero lo mismo es posible con el viejo HTML, así que ¿por qué necesitamos RLC para hacer eso? Probablemente este no es un punto de venta muy fuerte para RLC, pero lo que puedo decirte por ahora es que el protocolo react-flight es un protocolo rico, puede compartir entre servidor y clientes muchas cosas más que simple HTML, así que probablemente veremos más adelante si esto es algo que podemos usar adecuadamente.
Comments