Componentes de Servidor React

Rate this content
Bookmark

Los Componentes de Servidor React son una forma más nueva de trabajar con React que se adopta ampliamente en marcos de trabajo como Next.js. En esta charla, veremos cómo funcionan y se ejecutan en el lado del servidor, y cómo encajan con la renderización en el servidor y las aplicaciones tradicionales de React.

Tejas Kumar
Tejas Kumar
27 min
08 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Los componentes de servidor React resuelven el problema de las interrupciones en las interfaces de usuario causadas por aplicaciones web limitadas por CPU o red. Permiten que el contenido de solo lectura se renderice en el servidor y que los elementos interactivos se envíen al cliente, reduciendo el código enviado y mejorando el rendimiento. La renderización en el lado del servidor y la obtención en el lado del servidor mejoran la experiencia del usuario al reducir los retrasos y el flash de contenido sin estilo. La navegación suave con componentes de servidor permite volver a renderizar sin una navegación dura, y el uso de marcos de trabajo como Next.js ayuda con los desafíos de depuración y despliegue.

Available in English

1. Introducción a los Componentes del Servidor de React

Short description:

Esta conferencia es extremadamente especial para mí porque vivo en Berlín. He hablado en muchas conferencias alrededor del mundo, pero en Berlín, esta es la número dos. Estoy aquí para hablar en profundidad sobre los componentes del servidor de React. ¿Cuántos de ustedes están usando los componentes del servidor de React? Por eso estoy aquí.

♪ Escucha, yo, bueno, esto es... Uf, hombre, nunca me habían presentado así. Gracias, gracias, gracias, hermano. Eso fue tremendo. Mira, esta conferencia es extremadamente especial para mí porque vivo aquí. Berlín, lo llamo hogar. He vivido aquí durante ocho años y es un honor absoluto y un privilegio poder estar aquí y hablarles hoy en mi ciudad natal.

Este año, he hablado en más de 30 conferencias en todo el mundo, pero en Berlín, esta es la número dos. Y es extremadamente especial para mí ver a todos ustedes aquí desde Bélgica, desde los Países Bajos, todos estos lugares viniendo aquí, no solo para verme a mí, sino para celebrar React juntos, ¿verdad? Y eso es algo especial. Así que solo quiero darles las gracias por venir, por Git Nation. Increíble. Asombroso.

Siento que tengo una diapositiva de introducción, pero aparentemente no la necesito gracias a Nathaniel. Mi nombre es Tejas, se pronuncia como contagious. No lo soy, no te preocupes. Y a lo largo de los años, he trabajado en tecnología durante muchos, muchos años. Más de 20, perdí la cuenta. Y a lo largo de los años, he tenido el privilegio de trabajar con y en varios equipos por los que estoy realmente agradecido. Y realmente, es de eso de lo que quiero compartir con ustedes hoy, ¿vale? Hoy, soy consultor. Ayudo a las empresas enfocadas en desarrolladores a hacer DevRel. Y si necesitas ayuda con eso, estaré encantado de charlar después. Pero eso no es de lo que estamos aquí para hablar hoy. Hoy, estamos aquí para hablar sobre los componentes del servidor de React. Vamos a hablar de ello en profundidad. Tenemos 20 minutos, así que veremos hasta dónde llegamos. La última vez que di esta charla, duró 45 minutos, aunque estaba en un espacio de 20 minutos. Y luego, la gente de GitNation dijo: nunca más. De hecho, fue la última charla y se pasó de tiempo, así que ahora dijeron: te daremos la primera charla, así no puedes pasarte de tiempo. De todos modos, ¿cuántos de ustedes están usando los componentes del servidor de React? Bueno, eso es, diría yo, el 1% si acaso de la sala, lo cual está bien. Quiero decir, es nuevo, y por eso estoy aquí.

2. Mecanismo de los Componentes del Servidor de React

Short description:

Lo que quiero hablarles es sobre el mecanismo de los componentes del servidor de React. No voy a hablarles de cómo usarlo. Cubriremos los componentes del servidor desde el lado teórico, veremos los problemas que resuelven y cómo puedes implementar la renderización de componentes del servidor en la práctica. Comencemos a hablar sobre los componentes del servidor y cómo React permite que las aplicaciones web reaccionen bien y rápido.

Lo que quiero hablarles es sobre el mecanismo de los Componentes del Servidor de React. Así que no voy a hablarles de cómo usarlo. La forma predominante de cómo usarlo es simplemente usar Next.js o un marco que maneje la complejidad por ti. Creo que esto es relativamente sencillo. Puedes encontrarlo, Tobias de Marcelo está aquí, probablemente te hablará de ello, etc. Lo que quiero enseñarte es el mecanismo, cómo funcionan. Porque tengo un problema aceptando abstracciones de caja negra de alto nivel como ingeniero.

¿Alguien, estoy solo en esto? ¿Alguien más? Sí, okay, la mayoría de la gente. Y entonces si me dices, solo usa Next.js, y está resuelto para ti, estoy como, okay, eso es genial, gracias, equipo de Next.js, pero ¿cómo funciona para que entienda el mecanismo subyacente? ¿Okay? Y eso es de lo que estamos aquí para hablar hoy.

En nuestro tiempo juntos, no cubriremos dos cosas. No vamos a cubrir los conceptos básicos de React, asumo que ya lo sabes. Y si no lo sabes, podemos charlar por separado, pero tengo 20 minutos aquí. Y no cubriremos las acciones del servidor porque en el momento de dar la charla, muchas de las cosas específicas de React con las acciones del servidor están en Canary, lo que significa que es prelanzamiento, no está listo para producción. Puedes usar acciones del servidor en Next.js, pero de nuevo, no estoy listo para hablar de eso en una capacidad de React. De lo que hablaremos es de los componentes del servidor desde el lado teórico. Veremos los problemas que resuelven, y luego veremos cómo puedes implementar la renderización de componentes del servidor en la práctica. Veremos los límites entre los componentes del servidor, los componentes del cliente, qué significan y cómo encajan juntos.

Okay, con eso, me quedan 15 minutos. Guau. Con eso, comencemos a hablar sobre los componentes del servidor. De hecho, retrocedamos un poco y hablemos de React. Recientemente tuve el privilegio de escribir un libro sobre React, y entonces estoy pensando, como, estilo de primeros principios. React, por su nombre, es un software que permite a las aplicaciones web ¿qué? Para React, para interactuar con el usuario. Ese es todo el punto. Y podrías pensar, okay, entonces hago clic en un botón y React hace cosas. Exactamente. Pero no se trata solo de reaccionar. Se trata de reaccionar bien. Se trata de reaccionar rápido. Se trata de cuando se está realizando un trabajo de CPU costoso, ¿verdad? Estás renderizando una lista grande, y luego un usuario ingresa una tecla en una entrada.

QnA

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

Simplifying Server Components
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Top Content
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.
Exploring React Server Component Fundamentals
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
Top Content
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.
Server Components: The Epic Tale of Rendering UX
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
A Practical Guide for Migrating to Server Components
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.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
The Guild has recently released Envelop - a new, modern GraphQL Server Framework and plugin system. In this talk I’ll share a brief overview of Envelop and why you should probably upgrade your existing GraphQL server to it.

Workshops on related topic

Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- 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 Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
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!
Build a Custom Storefront on Shopify with Hydrogen
React Advanced Conference 2021React Advanced Conference 2021
170 min
Build a Custom Storefront on Shopify with Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
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.
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced Conference 2022React Advanced Conference 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
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.