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.

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
Los Componentes del Servidor son posiblemente el cambio más grande en React desde su lanzamiento inicial, pero muchos de nosotros en la comunidad hemos tenido dificultades para entenderlos. En esta charla intentaremos desglosar las diferentes partes móviles para que tengas una buena comprensión de lo que está sucediendo bajo el capó, y exploraremos la línea entre React y los marcos que se construyen sobre él.
Componentes del Servidor: La Epopeya de la Representación UX
React Summit 2023React Summit 2023
26 min
Componentes del Servidor: La Epopeya de la Representación UX
Los componentes del servidor, introducidos en React v18, ponen fin a estas limitaciones, permitiendo representar completamente los componentes de React en el servidor, en un formato de abstracción intermedio sin necesidad de agregar al paquete de JavaScript.Esta charla tiene como objetivo cubrir los siguientes puntos:1. Una divertida historia de cómo necesitábamos CSR y cómo SSR comenzó a ocupar su lugar2. ¿Qué son los componentes del servidor y qué beneficios aportan, como un tamaño de paquete de JavaScript de 0?3. Demostración de una aplicación simple utilizando representación en el lado del cliente, SSR y componentes del servidor, y análisis de las mejoras de rendimiento y comprensión de cuándo usar cada enfoque4. Mi opinión sobre cómo cambiará la representación de la interfaz de usuario con este enfoque
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
Los Componentes de Servidor son la nueva gran cosa, pero hasta ahora gran parte del discurso a su alrededor ha sido abstracto. Cambiemos eso. Esta charla se centrará en el lado práctico de las cosas, proporcionando un mapa de ruta para navegar el viaje de migración. Comenzando desde una aplicación que utiliza el antiguo enrutador de páginas de Next.js y React Query, desglosaremos este viaje en un conjunto de pasos accionables e incrementales, deteniéndonos solo cuando tengamos algo que se pueda enviar y que sea claramente superior a lo que comenzamos. También discutiremos los próximos pasos y estrategias para adoptar gradualmente más aspectos de este paradigma transformador.
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
El Guild ha lanzado recientemente Envelop - un nuevo y moderno Framework de Servidor GraphQL y sistema de plugins. En esta charla compartiré una breve descripción de Envelop y por qué probablemente deberías actualizar tu servidor GraphQL existente a él.
Componentes de Servidor React
React Day Berlin 2023React Day Berlin 2023
27 min
Componentes de Servidor React
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.

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
React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: Un profundo buceo en el desarrollo web de próxima generación
Workshop
Maurice de Beijer
Maurice de Beijer
¡Prepárate para potenciar tus habilidades de desarrollo web con React Server Components! En esta inmersiva masterclass de 3 horas, desbloquearemos todo el potencial 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 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!
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.
Creación de tiendas personalizadas en Shopify con Hydrogen
React Summit 2022React Summit 2022
71 min
Creación de tiendas personalizadas en Shopify con Hydrogen
WorkshopFree
Abe Haskins
Megan Majewski
2 authors
Sumérgete en Hydrogen, un marco basado en React impulsado por Shopify. En este masterclass, exploraremos el marco y pondremos en marcha una tienda personalizada rápidamente. Aprenderás cómo (y cuándo) aprovechar los Componentes del Servidor de React y los mecanismos de almacenamiento en caché para construir tiendas personalizadas rápidas y dinámicas.
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
React Advanced Conference 2022React Advanced Conference 2022
81 min
Construye una página de producto con el marco de trabajo Hydrogen de Shopify
WorkshopFree
David Witt
David Witt
Sumérgete en Hydrogen, un marco de trabajo basado en React para construir tiendas en línea sin cabeza. Hydrogen está diseñado para el comercio de Shopify con todas las características que necesitas para una tienda en línea lista para producción. Proporciona un inicio rápido y un entorno de desarrollo rápido para que puedas centrarte en lo divertido: construir experiencias de comercio únicas. En este masterclass, crearemos una nueva tienda en línea y construiremos rápidamente una página de producto. Cubriremos cómo empezar, enrutamiento basado en archivos, obtener datos de la API de Storefront, los componentes integrados de Hydrogen y cómo aplicar estilos con Tailwind.Aprenderás:- Empezar con la plantilla hello-world en StackBlitz- Enrutamiento basado en archivos para crear una ruta /productos/ejemplo- Enrutamiento dinámico /productos/:handle- Consultar la API de Storefront con GraphQL- Mover la consulta dentro de la aplicación de Hydrogen- Actualizar la consulta para obtener un producto por su identificador- Mostrar título, precio, imagen y descripción.- Estilizado con Tailwind- Selector de variantes y botón de compra ahora- Bonus si hay tiempo: página de colecciones
Requisitos previos: - Un navegador basado en Chromium (StackBlitz)- Idealmente experiencia con React. Un conocimiento general de desarrollo web también es válido.