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.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

FAQ

Tejas ha vivido en Berlín durante ocho años.

Tejas se especializa en ayudar a las empresas enfocadas en desarrolladores a hacer DevRel.

Los componentes del servidor de React son una forma de renderizar componentes en el servidor, resolviendo problemas como la obtención de datos y el tamaño grande de paquetes de JavaScript enviados al cliente.

La estrategia recomendada es usar un marco como Next.js, que maneja la complejidad de los componentes del servidor por ti.

El propósito de React es permitir que las aplicaciones web interactúen eficientemente con el usuario, manejando trabajo de CPU costoso y mejorando la respuesta de la interfaz de usuario.

Este año, Tejas ha hablado en más de 30 conferencias en todo el mundo.

Los componentes del servidor mejoran la experiencia del usuario al reducir los tiempos de carga y evitar interrupciones como los spinners al obtener datos directamente en el servidor.

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: React Server Components

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

Simplificando los Componentes del Servidor
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplificando los Componentes del Servidor
Top Content
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
Explorando los fundamentos de los Componentes del Servidor React
React Day Berlin 2023React Day Berlin 2023
21 min
Explorando los fundamentos de los Componentes del Servidor React
Top Content
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.
Y Ahora Entiendes los Componentes del Servidor React
React Summit 2024React Summit 2024
27 min
Y Ahora Entiendes los Componentes del Servidor React
Top Content
In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Componentes del Servidor: La Épica Historia de Renderizar UX
React Summit 2023React Summit 2023
26 min
Componentes del Servidor: La Épica Historia de Renderizar UX
Top Content
This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Baterías Incluidas Reimaginadas - El Resurgimiento de GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.

Workshops on related topic

Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
React Summit US 2023React Summit US 2023
160 min
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
Esta masterclass te guiará a través del ciclo de vida del desarrollo de productos para crear una aplicación web del mundo real. Aprenderás sobre los Componentes del Servidor React, construyendo un sistema de diseño dentro de Storybook, y utilizando el desarrollo frontend para acercarte a convertirte en un desarrollador full-stack. La masterclass cubrirá el aumento de la confianza en tu aplicación con pruebas unitarias e implementando autenticación y autorización. Tendrás la oportunidad de trabajar a través de las características del producto y examinar un proyecto real de RedwoodJS, obteniendo valiosa experiencia en el desarrollo de productos del mundo real. RedwoodJS hace que sea simple acercarse al desarrollo full-stack, y esta masterclass te dará las habilidades que necesitas para crear tus propias aplicaciones web del mundo real.
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
React Summit US 2023React Summit US 2023
104 min
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
Top Content
WorkshopFree
 Greg Brimble
Greg Brimble
El ecosistema de desarrolladores siempre está avanzando rápidamente y este año no ha sido una excepción. Los Componentes de Servidor React pueden ofrecer una mejora significativa a la experiencia del desarrollador y al rendimiento de la aplicación. Pero creo que es justo decir que este nuevo paradigma de servidor primero puede ser complicado de entender!En la primera mitad de esta masterclass, exploraremos los Componentes de Servidor React desde cero: construyendo nuestro propio mini marco meta para ayudarnos a entender cómo funcionan los RSCs. Descubriremos exactamente qué se produce en una construcción RSC y conectaremos esas piezas para formar una aplicación completa.A continuación, ¡lo desplegaremos! Cloudflare también ha tenido un año ocupado — Smart Placement, en particular, es una nueva tecnología que hemos desarrollado que se ajusta perfectamente al modelo RSC. Exploraremos por qué eso tiene sentido para nuestra aplicación de masterclass, y realmente lo desplegaremos en la Plataforma de Desarrolladores de Cloudflare.Finalmente, ampliaremos un poco más nuestra aplicación, utilizando D1 (nuestra base de datos SQL sin servidor) para mostrar realmente el poder del Componente de Servidor React cuando se combina con Smart Placement.Deberías salir de esta masterclass con una mayor comprensión de cómo funcionan los Componentes de Servidor React (tanto detrás de las escenas como también cómo tú como desarrollador puedes usarlos día a día), así como una visión de algunos de los nuevos patrones de despliegue que ahora son posibles después de las recientes innovaciones en el espacio de la plataforma.
Construyendo Componentes de Servidor Reutilizables en NextJS
React Summit US 2023React Summit US 2023
88 min
Construyendo Componentes de Servidor Reutilizables en NextJS
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continúa evolucionando su capacidad beta, los Componentes de Servidor de React, y continúan desarrollándolos en asociación con marcos como NextJS.En esta masterclass, los asistentes aprenderán qué son los Componentes de Servidor de React, cómo construirlos y usarlos eficazmente en NextJS, y se centrarán en una de las principales ventajas de React/NextJS: la reutilización a través de componentes.También cubriremos tecnologías beta relacionadas habilitadas por el directorio `app`, como los layouts anidados y las acciones del servidor (capacidad alfa/experimental).¡Únete a nosotros para esta masterclass práctica de 120 minutos!Tecnologías:
React, JavaScript/Typescript, NextJS, Miro
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
React Day Berlin 2023React Day Berlin 2023
149 min
Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado 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 Componentes del Servidor 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 Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React
Construye una Tienda Personalizada en Shopify con Hydrogen
React Advanced Conference 2021React Advanced Conference 2021
170 min
Construye una Tienda Personalizada en Shopify con Hydrogen
Workshop
Matt Seccafien
Cathryn Griffiths
2 authors
Hydrogen es un marco de trabajo y SDK React con opiniones para construir tiendas personalizadas rápidas, alimentadas por Shopify. Hydrogen adopta los Componentes del Servidor React y utiliza Vite y Tailwind CSS. En este masterclass, los participantes tendrán una primera vista de Hydrogen, aprenderán cómo y cuándo usarlo, todo mientras construyen una tienda personalizada completamente funcional con el equipo de Hydrogen.