Explorando los fundamentos de los Componentes del Servidor React

Rate this content
Bookmark

He estado desarrollando un marco minimalista para los Componentes del Servidor React (RSC). Esta charla compartirá mi viaje para entender profundamente RSC desde una perspectiva técnica. Demostraré cómo operan las características de RSC a un nivel bajo y proporcionaré ideas sobre lo que RSC ofrece en su núcleo. Al final, deberías tener un modelo mental más fuerte de los fundamentos de los Componentes del Servidor React.

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

FAQ

Los React Server Components (RSC) son una funcionalidad de React que permite trabajar React en espacios de memoria separados, como entre un servidor y un cliente, dos servidores o incluso dentro de los hilos de trabajo del navegador. Se enfocan en la serialización de elementos JSX y otros valores de JavaScript para transmitirlos entre diferentes entornos de ejecución.

Aunque ambos pueden ejecutarse en el servidor, RSC no produce HTML directamente, sino que genera una carga útil similar a JSON que representa el estado de los componentes. Por otro lado, SSR genera contenido HTML en el servidor para mejorar la experiencia del usuario y la optimización de motores de búsqueda durante la carga inicial de la página.

Daishi Kato ha explorado los fundamentos de los RSC, incluyendo su capacidad para serializar y deserializar componentes y valores de JavaScript. Además, ha trabajado en su aplicación práctica a través de demostraciones sin usar frameworks adicionales, centrándose en entender los comportamientos internos de RSC.

Waku es un framework de React centrado en los React Server Components, desarrollado por Daishi Kato. Este framework está diseñado para facilitar la implementación de RSC, integrando características como bundlers, servidores y enrutadores para mejorar el desarrollo y la administración de aplicaciones React modernas.

En RSC, la serialización implica convertir elementos JSX y otros valores de JavaScript en un formato que puede ser transmitido entre el servidor y el cliente o entre diferentes entornos. Esta serialización facilita el envío de estados de componentes y datos a través de redes o dentro de diferentes partes de una aplicación.

Los React Server Components ofrecen ventajas como la reducción de la carga de JavaScript que debe enviar el servidor al cliente, la mejora en los tiempos de carga al ejecutar código solo donde es necesario, y la capacidad de mantener separados los espacios de memoria, lo que puede aumentar la eficiencia y seguridad de las aplicaciones.

Daishi Kato es conocido por desarrollar proyectos populares como Jotai y Zustand, ambos enfocados en la gestión de estados en JavaScript, proporcionando diferentes enfoques y funcionalidades para manejar el estado en aplicaciones React y otras aplicaciones de JavaScript.

Daishi Kato
Daishi Kato
21 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla presenta los Componentes del Servidor React (RSC) y explora su proceso de serialización. Compara RSC con la representación tradicional del lado del servidor (SSR) y explica cómo RSC maneja las promesas e integra los componentes del cliente. La charla también discute el manifiesto de RSC y el proceso de deserialización. Luego, el orador presenta el marco Waku, que soporta la agrupación, el servidor, el enrutamiento y SSR. Los planes futuros para Waku incluyen la integración con las bibliotecas de gestión del estado del cliente.

1. Introducción a los Componentes del Servidor React

Short description:

¡Hola a todos! Estoy muy emocionado de dar una charla este año sobre los componentes del servidor React. Compartiré lo que he aprendido hasta ahora, exploraré los fundamentos de RSC y hablaré de mi proyecto, Waku. RSC significa Componente del Servidor React, y se trata de usar React en lugares diferentes al navegador. El núcleo de RSC es la serialización, que permite que React funcione en espacios de memoria separados. Procedamos con la demostración utilizando el canal canario de React y el paquete React-ServerDOM-webpack.

¡Hola a todos! Estoy muy emocionado de dar una charla este año, especialmente porque es sobre mi nuevo proyecto. Se trata de los React Server components, con los que he estado aprendiendo y experimentando durante varios meses. Hoy, voy a compartir lo que he aprendido hasta ahora. Mi nombre es Daishi Kato. Soy un desarrollador de código abierto, y algunos de mis proyectos populares son Jotai y Zustand. Tal vez lo sepan, pero ambos son para la gestión de estado. Son como competidores, pero en realidad es bueno porque nos aportan más feedback. Actualmente, Zustand está adelante y Jotai está persiguiéndolo. En el React Day Berlin 2022, hablé sobre Jotai. Es un honor estar aquí hablando de nuevo este año.

En la primera parte de esta charla, exploraremos los fundamentos de RSC. Tengo una demostración usando solo Node.js sin ningún framework. No es una codificación en vivo, pero espero que lo encuentren disfrutable. Si están interesados, pueden probarlo por su cuenta más tarde. Esta demostración es principalmente para los autores de bibliotecas o aquellos que quieren entender los comportamientos internos de RSC.

En la segunda parte hablaremos de mi proyecto, Waku. Es un framework de React centrado en RSC. Permítanme comenzar con una respuesta mía. ¿Qué es RSC? RSC significa Componente del Servidor React. Sin embargo, la parte del servidor en el nombre puede ser confusa. Se trata más de usar React en lugares diferentes a, digamos, el navegador. Y solo una nota rápida, técnicamente también puedes usar RSC en los navegadores. Profundizando, ¿cuál es el núcleo de RSC? Creo que la esencia es la serialización. Antes de RSC, React trabajaba dentro de un solo espacio de memoria. Pero con RSC, React ahora puede trabajar en espacios de memoria separados. Esto podría ser entre un servidor y un cliente, dos servidores o incluso dentro de los hilos de trabajo del navegador. Ahora, procedamos con la demostración. Comencemos configurando un proyecto de prueba. Por ahora, usaremos el canal canario de React hasta que salga una versión estable. El paquete React-ServerDOM-webpack está aquí para darnos las características de RSC.

2. Introducción a RSC y SSR

Short description:

Comenzaremos con un ejemplo simple sin RSC. Es React tradicional, y no tiene nada que ver con RSC. Este elemento JSX no es serializable. Veamos el renderizado del lado del servidor tradicional con nuestro próximo ejemplo. El renderizado del lado del servidor o SSR es un proceso para generar contenido HTML en el servidor. Técnicamente, SSR también puede ejecutarse en navegadores. Ahora, examinemos el código. Utilizamos la función RenderToPipeableStream de react-dom-server. Esta función está disponible en la versión estable del paquete react-dom. Al ejecutar este código, se mostrará el HTML resultante. En nuestro próximo ejemplo, veremos cómo funciona RSC en comparación con este ejemplo de SSR. Vamos a explorar cómo se desempeña el aspecto de serialización de RSC. En esta demostración, utilizamos la función renderToPipableString() de react-server.webpack/.server.

Está diseñado específicamente para webpack porque algunas de sus características tienen una relación cercana con los empaquetadores. Sin embargo, no usamos webpack en nuestra demostración de todos modos.

Ahora sigamos adelante. Comenzaremos con un ejemplo simple sin RSC. Aquí está nuestro primer ejemplo. Es React tradicional, y no tiene nada que ver con RSC. Al mirar el código, encontrarás que simplemente estamos definiendo un AppComponent y mostrando el resultado con console.log. Cuando ejecutas el código, mostrará un objeto JSON. A esto se le suele referir como un elemento React o un elemento JSX. Lo importante a tener en cuenta aquí es que este elemento JSX no es serializable. Por ejemplo, contiene un símbolo para su propiedad de tipo especial. En este ejemplo, la propiedad type es una función que no es serializable. Exploraremos cómo RSC aborda esto en breve, pero antes de eso, veamos el renderizado del lado del servidor tradicional con nuestro próximo ejemplo.

El renderizado del lado del servidor o SSR es un proceso para generar contenido HTML en el servidor. Es importante tener en cuenta que SSR es diferente de RSC. Aunque RSC puede ejecutarse en el servidor, no produce HTML. Por cierto, SSR técnicamente también puede ejecutarse en navegadores. Ahora, examinemos el código. Utilizamos la función RenderToPipeableStream de react-dom-server. Esta función está disponible en la versión estable del paquete react-dom. Dado que RenderToPipeableStream devuelve un stream, no podemos simplemente usar console.log. En su lugar, lo dirigimos a Process.standard.out. Al ejecutar este código, se mostrará el HTML resultante. SSR se utiliza comúnmente durante la carga inicial de la página para mejorar la user experience y la optimization del motor de búsqueda. En nuestro próximo ejemplo, veremos cómo funciona RSC en comparación con este ejemplo de SSR.

Ahora, exploremos cómo se desempeña el aspecto de serialización de RSC. En esta demostración, utilizamos la función renderToPipableString() de react-server.webpack/.server. Tenga en cuenta, esto está disponible solo en la versión Canary. Excepto por importar la función de un paquete diferente, el resto permanece igual que en el ejemplo anterior. Al ejecutar este código, obtenemos una salida similar a JSON.

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.
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.
RSCs en Producción: 1 Año Después
React Summit 2024React Summit 2024
24 min
RSCs en Producción: 1 Año Después
This Talk explores the experience of shipping server components in production and highlights the benefits and challenges of using Server Components in Next.js apps. The Talk discusses the deployment of UploadThing and the use of AppRouter for safe production usage. It delves into the implementation of different layouts, data fetching, and code centralization for improved performance. The Talk also covers the use of server components for performance optimization and latency handling. Additionally, it explores the use of Edge and Lambda for partial pre-rendering and the challenges faced with webpack performance and hydration. Overall, the Talk emphasizes the benefits and challenges of working with Server Components in Next.js applications.
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.