Hydrogen: Un Vistazo Temprano a los Componentes del Servidor en la Práctica

Hola. Hola a todos. No estaba seguro. Hice tantas diapositivas, tuve que eliminar muchas para hacerlo una charla rápida.

De todos modos, estoy aquí para hablar sobre Hydrogen y una primera mirada a los componentes del servidor. Este soy yo. Trabajo en Shopify. Soy parte de los mantenedores de este framework, que está hecho para tiendas en línea sin cabeza. Lo interesante de este framework es que usamos React 18. Usamos componentes del servidor y Vita. Quiero hablar sobre algunas de nuestras experiencias con los componentes del servidor en la práctica. Como referencia, ya tenemos algunos grandes comerciantes que los utilizan en sitios de producción. Allbirds, estos son comerciantes que ya obtienen miles de millones. Este es otro hecho con hydrogen. Denim tears. Atoms.

Lo curioso de hydrogen es que proporcionamos componentes para que puedas construir muy rápido esta tienda en línea sin cabeza. Y por ejemplo, este fue construido por un desarrollador en tres meses. Y en promedio, lleva alrededor de 12 meses hacer esto. Así que creo que eso es bastante genial. Y, sí. Así que todos están con componentes del servidor en la práctica.

Quería hablar sobre el renderizado de React. Al principio, solíamos tener solo los componentes. Y luego los agrupábamos todos juntos. Y luego los enviábamos al navegador. Y luego la persona veía esta pantalla blanca por un tiempo hasta que todo se renderizaba. En algún momento, complicamos las cosas, o no sé, las hicimos más interesantes al tener renderizado del lado del servidor e hidratación. Y supongo que ahora lo que sucede es que enviamos una versión renderizada del sitio desde el servidor, y luego el paquete del cliente. Y luego lo hidratamos.

Y luego se vuelve interactivo, pero aún un poco incómodo. Y supongo que lo que nos gustaría tener, especialmente para sitios de comercio, es algo más como esto, ¿verdad? Se abre y puedo comprar de inmediato.

Entonces, sí, por eso estamos usando React 18. React 18 te brinda ahora tres componentes. Los del servidor. Cliente y compartido. Y los componentes del cliente es algo que ya hacemos, ¿verdad? Usamos estado y hacemos esto, no sé, estas funciones. Y se envían al navegador. Se renderizan allí. Excepto con todas las cosas de iteración de las que hablé, que es, ya sabes, toda la magia. Los nuevos son los componentes del servidor, y estos son muy interesantes porque haces lo mismo que los componentes del cliente. Pero el resultado final es que esto es HTML que se envía directamente. Y el último es el componente compartido. Que es algo que podría estar en el cliente o en el servidor también. Pero creo que lo principal de lo que quiero hablar son los componentes del cliente y del servidor.

Lo interesante de los componentes del servidor es que no agregas nada al paquete. Así que simplemente envías HTML directamente. La forma en que los usamos en Hydrogen es que los construimos normalmente, como cualquier otro componente, pero también hacemos consultas a la base de datos. Y luego los colocamos en los componentes, y el resultado final es simplemente enviar HTML directamente al navegador. Entonces, ¿por qué no usamos componentes del servidor para todo? Porque aún necesitamos interactividad. Si quiero comprar una cantidad diferente de productos, quiero poder elegir eso y hacer un renderizado en el servidor. Debido a eso, tal vez sea demasiado. Algunas de nuestras experiencias han sido que, a medida que implementamos componentes del servidor, no todas las bibliotecas son compatibles. Ese es un problema que hemos tenido. A veces tienes que hacer malabarismos para hacer que funcionen. Un segundo aprendizaje es que, tan pronto como dimos componentes del servidor a las personas, comenzaron a hacer muchas obtenciones de datos. Esto puede llevar mucho tiempo y luego la gente dice: `¿Los componentes del servidor se supone que deben hacer que mi sitio sea más rápido, pero en realidad es más lento?` Pero es porque estamos obteniendo muchos datos. Algo que React proporciona es suspense. Entonces, lo que harías es envolver este componente que es muy pesado en suspense, y el resultado es, por ejemplo, en este ejemplo aquí, todo se renderiza, pero esa pequeña parte que podría ser un poco pesada se renderiza y sirve más tarde. Aún son difíciles de depurar.

Como cuando algo sale mal con los componentes del servidor, no sabemos cómo echar un vistazo. Todavía no hay suficientes herramientas disponibles, por lo que sería bueno invertir en eso, pero lo bueno de los componentes del servidor es que la encapsulación es realmente excelente. Todavía puedo hacer lo mismo que con los componentes del cliente y tener algo como esto, y poder renderizar las cosas rápidamente y a través de HTML y usarlas directamente.

Así que supongo que el futuro de headless, creo, es emocionante. Tenemos cosas nuevas como Edgeworkers, donde podemos tener renderizados muy cercanos al usuario. Por lo tanto, podemos hacer renderizado del servidor muy rápido, y ahora tenemos muchas plataformas de alojamiento como Oxygen, que es algo que tenemos en Shopify. Y debido a eso, estamos comenzando a ver puntuaciones de Lighthouse que se ven así, incluso con sitios de e-commerce que son altamente dinámicos y podrían tener muchas complejidades. Correcto.

Entonces, en conclusión, creo que el renderizado del servidor ocurrirá con más frecuencia. Y, sí, si quieres comprobarlo, puedes ir a este sitio web, addogen.new, y puedes jugar con una tienda de demostración que hicimos y probar los componentes del servidor. Y estamos contratando en Shopify. Así que, sí, eso es todo para mí. Eso es todo. Gracias. Gracias. Fue un placer. Gracias.