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

Rate this content
Bookmark

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.

7 min
21 Oct, 2022

Comments

Sign in or register to post your comment.

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.

Available in English

1. Introducción a Hydrogen y Server Components

Short description:

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

Short description:

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.

3. Componentes del Servidor y el Futuro de Headless

Short description:

Cuando algo sale mal con los componentes del servidor, hay una falta de herramientas. Sin embargo, los componentes del servidor ofrecen una gran encapsulación y permiten un renderizado rápido a través de HTML. El futuro de headless es emocionante con nuevas tecnologías como Edgeworkers y plataformas de alojamiento como Oxygen. El renderizado del servidor se volverá más prevalente. Visita addogen.new para probar una tienda de demostración con componentes del servidor. Estamos contratando en Shopify. Gracias!

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.

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

React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
I've been developing a minimalistic framework for React Server Components (RSC). This talk will share my journey to deeply understand RSC from a technical perspective. I'll demonstrate how RSC features operate at a low level and provide insights into what RSC offers at its core. By the end, you should have a stronger mental model of React Server Components fundamentals.
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Server components, introduced in React v18 end these shortcomings, enabling rendering React components fully on the server, into an intermediate abstraction format without needing to add to the JavaScript bundle. This talk aims to cover the following points:1. A fun story of how we needed CSR and how SSR started to take its place2. What are server components and what benefits did they bring like 0 javascript bundle size3. Demo of a simple app using client-side rendering, SSR, and server components and analyzing the performance gains and understanding when to use what4. My take on how rendering UI will change with this approach
React Advanced Conference 2023React Advanced Conference 2023
28 min
A Practical Guide for Migrating to Server Components
Server Components are the hot new thing, but so far much of the discourse around them has been abstract. Let's change that. This talk will focus on the practical side of things, providing a roadmap to navigate the migration journey. Starting from an app using the older Next.js pages router and React Query, we’ll break this journey down into a set of actionable, incremental steps, stopping only when we have something shippable that’s clearly superior to what we began with. We’ll also discuss next steps and strategies for gradually embracing more aspects of this transformative paradigm.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:
- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Workshop level: 
No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Hydrogen is an opinionated React framework and SDK for building fast, custom storefronts powered Shopify. Hydrogen embraces React Server Components and makes use of Vite and Tailwind CSS. In this workshop participants will get a first look at Hydrogen, learn how and when to use it, all while building a fully functional custom storefront with the Hydrogen team themselves.
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.