El marco de trabajo Hydrogen de Shopify ha sido lanzado con una versión temprana de los componentes del servidor de React. En esta charla discutiré: * ¿Qué es Hydrogen? * ¿Qué son los componentes del servidor y cómo los estamos utilizando? * ¿Cómo son diferentes de los componentes del cliente y compartidos? * ¿Cómo se diferencian el renderizado del lado del servidor y los componentes del servidor? * También mostraré ejemplos en la práctica. Después de la charla, espero que los asistentes comprendan mejor el marco de trabajo Hydrogen y los componentes del servidor de React.
Hydrogen: Un Vistazo Temprano a los Componentes del Servidor en la Práctica
FAQ
Hydrogen es un framework desarrollado por Shopify para tiendas en línea sin cabeza (headless). Utiliza React 18 y está diseñado para facilitar la construcción rápida de tiendas online aprovechando componentes del servidor.
Los componentes del servidor en Hydrogen permiten enviar HTML directamente al navegador sin agregar peso al paquete del cliente, lo que puede resultar en una carga más rápida y una mejor encapsulación de los componentes.
En promedio, construir una tienda en línea con Hydrogen puede llevar alrededor de 12 meses, aunque hay casos, como un desarrollador que logró construir una tienda en solo tres meses.
Grandes comerciantes como Allbirds, Denim Tears y Atoms ya están utilizando Hydrogen en sus sitios de producción, beneficiándose de sus capacidades y rendimiento.
La hidratación es un proceso donde el HTML enviado desde el servidor se rellena con interactividad en el cliente, permitiendo que la página se vuelva interactiva después de que se haya cargado el contenido inicial.
Aunque los componentes del servidor son eficientes, aún se necesitan componentes del cliente para manejar la interactividad específica de las aplicaciones web, como la selección de productos y otras interacciones dinámicas.
Uno de los principales desafíos es la compatibilidad con algunas bibliotecas y la complejidad en la depuración, ya que no todas las herramientas están adaptadas para trabajar con componentes del servidor.
Video Summary and Transcription
Grandes comerciantes están utilizando Hydrogen y componentes del servidor en sitios de producción para construir tiendas sin cabeza rápidamente. React 18 introduce componentes del servidor que permiten el renderizado interactivo sin agregar nada al paquete. Sin embargo, no todas las bibliotecas son compatibles y la obtención de datos puede ralentizar el sitio, pero React proporciona suspense para manejar componentes pesados. Los componentes del servidor ofrecen una gran encapsulación y un renderizado rápido a través de HTML, y el futuro de las tiendas sin cabeza es prometedor con tecnologías como Edgeworkers y plataformas de alojamiento como Oxygen. Shopify está contratando y ofrece una tienda de demostración con componentes del servidor en addogen.new.
1. Introducción a Hydrogen y Server Components
Estoy aquí para hablar sobre Hydrogen y una primera mirada a los componentes del servidor. Usamos React 18, componentes del servidor y Vita. Tenemos grandes comerciantes que los utilizan en sitios de producción. Hydrogen te permite construir rápidamente una tienda en línea sin cabeza. Renderizar React solía ser simple, pero ahora tenemos renderizado del lado del servidor e hidratación.
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.
2. Introducción a React 18 y Componentes del Servidor
Y luego se vuelve interactivo, pero aún un poco incómodo. Usamos React 18, que te brinda tres componentes: servidor, cliente y compartido. Lo interesante de los componentes del servidor es que no agregas nada al paquete. Aún necesitamos interactividad, por lo que usamos componentes del servidor para tareas específicas. Sin embargo, no todas las bibliotecas son compatibles y la obtención de datos puede ralentizar el sitio. React proporciona suspense para manejar componentes pesados.
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.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Workshops on related topic
Únete a nosotros mientras nos adentramos en el emocionante mundo de React Server Components, que combina a la perfección la renderización del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Server Components en tus propios proyectos.
A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:
- Entender las diferencias entre los componentes del servidor y del cliente- Implementar Server Components para optimizar la obtención de datos y reducir el tamaño del paquete de JavaScript- Integrar Server y Client Components para una experiencia de usuario fluida- Estrategias para pasar datos eficazmente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de React Server Components
Nivel de la masterclass:
No importa tu nivel actual de experiencia en React, esta masterclass te equipará con el conocimiento y las herramientas para llevar tu juego de desarrollo web a nuevas alturas. No pierdas esta oportunidad de mantenerte a la vanguardia y dominar la tecnología de vanguardia que está cambiando la cara del desarrollo web. ¡Inscríbete ahora y desata todo el poder de React Server Components!
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.
Comments