Panel de Discusión: Dificultades de la Adopción de RSC Desde el Lado de Frameworks y Bibliotecas

This ad is not shown to multipass and full ticket holders
React Summit
React Summit 2025
June 13 - 17, 2025
Amsterdam & Online
The biggest React conference worldwide
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit 2025
React Summit 2025
June 13 - 17, 2025. Amsterdam & Online
Learn more
Video Summary and Transcription
Tema: Desafíos de la adopción de React Server Components como mantenedor de una biblioteca o marco. Daishi y Tobi comparten experiencias en el desarrollo de marcos de React. La próxima migración y actualizaciones de versión de Redwood. El papel fundamental de Dominik con React Query en el proceso de migración. Limitaciones de React Query en componentes del servidor. Desafíos de adaptación de bibliotecas de gestión de estado. La perspectiva de Alexander sobre la transformación de RSC y su impacto en las prácticas de desarrollo. Cambio de mentalidad de los desarrolladores hacia React Server Components y desafíos en la frontera servidor-cliente. Desafíos en la implementación de React Server Components con diferentes marcos y la necesidad de múltiples implementaciones para determinar las mejores prácticas. Desafíos en la comprensión de las implementaciones de componentes de React dentro de diferentes marcos y el cambio de Webpack a Vite para el desarrollo de componentes del servidor. Discusión sobre los desafíos y ventajas de la implementación de componentes del servidor y el impacto en la comunidad de React. Discusión sobre el impacto de equipos grandes en la velocidad de desarrollo y la importancia de implementar tecnologías en múltiples ecosistemas. Discusión sobre el complejo industrial de React, las contribuciones de desarrolladores individuales y los enfoques diversos hacia los componentes del servidor de React como 10 stack start. Discusión sobre la necesidad de implementaciones, pruebas de configuraciones de componentes del servidor y la importancia de la documentación en el desarrollo de React. Los panelistas discuten proyectos emocionantes que se avecinan, como la integración de React Query, mejoras en la obtención de datos en Redwood y una posible solución de relay para los componentes del servidor de React.

1. Exploring Challenges in React Development

Short description:

Tema: Desafíos de la adopción de React Server Components como mantenedor o autor de una biblioteca o marco. Daishi y Tobi comparten experiencias en el desarrollo de marcos de React. La próxima migración y actualizaciones de versión de Redwood. El papel fundamental de Dominik con React Query en el proceso de migración.

Así que el tema para nosotros hoy es el título que se nos dio para reflexionar y meditar es Desafíos de la adopción de React Server Components como mantenedor o autor de una biblioteca o marco. Sabes, es un mensaje muy amplio y, ya sabes, creo que todos estamos muy interesados en el proceso que entra en la picadora. Sabes, creo que Daishi hoy, ya sabes, explicaste, mostraste, ya sabes, en la práctica lo que, ya sabes, como emprender es en realidad implementar todos los diferentes, ya sabes, tipos de casos necesarios para soportar los componentes del servidor. Así que vamos a saltar directamente a ello. Entonces, ya sabes, trabajas en un masterclass donde, ya sabes, tienes que esencialmente averiguar, ya sabes, todo esto, ya sabes, por ti mismo. ¿Cómo ha sido la experiencia? Bueno, ¿está encendido? Sí. Está bien. Así que desarrollar un marco de React es difícil. Una de las razones es que no está muy especificado. Así que pasé por todos los ejemplos y probé muchas, muchas cosas y vi, entendí el comportamiento, no desde el documento, no desde el código fuente y, sí, construí un modelo mental y creé un marco, lo cual sigue siendo una tarea difícil. Pero sí, lo he hecho. Lo has hecho. Sí. Sí. Un aplauso. Y entiendo que Tobi, estás en el proceso de hacerlo. Aún no lo has hecho del todo, pero estás cerca de haberlo hecho. ¿Es correcto? Estoy tratando de... decir que estoy cerca es difícil, pero sí. No, siento que finalmente estamos acercándonos a tener algo que podamos enviar para que los usuarios jueguen, por supuesto. Sí, correcto. Así que Redwood está haciendo la especie de migración, ya sabes, como antes, tú, ya sabes, como supongo que Redwood sería considerado como centrado alrededor de GraphQL y ahora en el futuro, la próxima versión de Redwood será...

Así que la próxima versión, volviendo a cuáles son nuestras versiones principales, intentamos, como estamos en la versión 8. Probablemente vamos a ser la versión 9, 10, tal vez antes de hacer el gran lanzamiento con React Serial Components. Así que nosotros intentamos hablar en épocas en su lugar, pero ya veremos. La mensajería es difícil alrededor de las versiones principales por supuesto porque la gente ha escuchado, espera cosas grandes, pero solo porque es una versión principal rompe. Pero sí, así que la próxima versión probablemente no, pero sí, la próxima época definitivamente será React Serial Components. Sí. Y Dominik, ya sabes, estás trabajando en React Query, que es como una biblioteca de cliente, ¿verdad? Pero, ¿te sorprende en absoluto que estés encontrando tu biblioteca en una posición muy fundamental en esta especie de, ya sabes, migración? Como, ya sabes, en mi trabajo usamos Next.js App Director y usamos componentes del servidor y usamos React Query, ya sabes, como el tipo de caché del lado del cliente.

2. Challenges in Adopting React Server Components

Short description:

Limitaciones de React Query en componentes del servidor. Desafíos de adaptación de bibliotecas de gestión de estado. Perspectiva de Alexander sobre la transformación de RSC y su impacto en las prácticas de desarrollo.

Así que debes estar viendo muchos de los problemas y desafíos reales de los usuarios finales, ya sabes, de alguna manera. ¿Hay, ya sabes, algo como cuál ha sido tu experiencia como mantenedor de un proyecto, ya sabes, percibiendo a las personas adoptando componentes del servidor usando React Query? Sí, es un poco una posición incómoda porque, como dijiste, React Query es fundamentalmente una biblioteca del lado del cliente ¿verdad? Así que todos los hooks que exponemos no se pueden usar en el servidor. Así que a veces recibimos preguntas como, ¿podemos usar esto en componentes del servidor? Y la respuesta es, fundamentalmente, no, no puedes usarlo en un componente del servidor. No puedes usarlo en un marco que aproveche los componentes del servidor para renderizar si quieres algo de interactividad del lado del cliente o si quieres iniciar la obtención de datos en el servidor y luego enviar datos o incluso enviar la promesa al cliente y luego ponerlo en la caché del cliente y luego continuar con la interactividad del lado del cliente allí. Pero en los propios componentes del servidor, React Query en realidad no exporta ningún componente aparte del proveedor de contexto. Así que realmente no hay nada que puedas usar en un componente del servidor. Sí, pero aún así es una parte fundamental de ello y, de hecho, similar, tu esfuerzo anterior, eres bien conocido por ser un mantenedor de muchas bibliotecas de gestión de estado. Nuevamente, como las personas con las que has interactuado en el pasado, mantener estas bibliotecas ahora han enfrentado esta especie de replanteamiento monumental. ¿Estás viendo algún tipo de cambio allí? Sí, exactamente. Para las personas que han usado mi biblioteca de gestión de estado, quieren usar RSC del servidor, componente del servidor, pero no es posible porque es una biblioteca de gestión de estado del lado del cliente. Así que he tenido dificultades para explicar por qué esto no es posible o cómo deberíamos hacerlo. Así que esa es una de mis motivaciones para comenzar a desarrollar Waku para que eventualmente pueda apoyar esas bibliotecas de gestión de estado. Así que sí, eso es lo que pasa. Sí. Y creo que eso es algo así como, ayer estábamos hablando de esto y creo que un cambio de mentalidad es una gran cosa y probablemente pasaremos mucho tiempo hablando de ello. Así que antes de saltar a eso, Alexander, también quería preguntarte, acabas de dar una presentación donde mostraste una especie de línea de tiempo de las cosas en las que has trabajado en el contexto de los datos. Y fue muy interesante en el contexto de los componentes del servidor de React porque de alguna manera fuiste un pionero con Blitz, una especie de modelo temprano de poder importar código del servidor en código del cliente, aunque no se basara en RSC. Así que, ¿cómo ves esta transformación? Si estuvieras trabajando en ese proyecto o en tu próximo proyecto en ese espacio, ¿crees que RSC sería el camino a seguir para ti? Sí, creo que sí. Algo que intentamos hacer es minimizar esta capa de API para acercar el servidor al cliente, que también es algo que RSC permite. Y básicamente era este marco que te permitiría ejecutar código del servidor o acceder a tu base de datos directamente en tus componentes del cliente. Y sí, no usó RSC. Pasamos un tiempo pensando, como, bien, ¿cómo lidiamos con eso? ¿Cómo no copiamos el código? ¿Cómo no lo tenemos en dos lugares, en el servidor y en el cliente? ¿Cómo se comunica? Así que sí, definitivamente siento que los RSC son el camino. Es una pena que no los tuviéramos en ese entonces, pero es bueno que tuviéramos Blitz. Bueno, esa es siempre la pena del pionero. Tienes que resolver muchas cosas que las generaciones posteriores obtienen gratis, esencialmente. Así que saltemos a este tipo de cambio de mentalidad. Esto parece ser algo que, como, ¿fue ayer, tuvimos una pequeña conversación sobre de qué deberíamos hablar? Y Dominik dijo algo como, bueno, hay estos desarrolladores que simplemente no quieren actualizar su forma de pensar. Y yo estaba como, espera un minuto.

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 2023React Advanced 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 2023React Advanced 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.

Workshops on related topic

Dominando React Server Components y Server Actions en React 19
React Summit US 2024React Summit US 2024
150 min
Dominando React Server Components y Server Actions en React 19
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¡Llamando a todos los desarrolladores de React! Únete a nosotros para una masterclass inmersiva de 4 horas profundizando en React Server Components y Server Actions. Descubre cómo estas tecnologías revolucionarias están transformando el desarrollo web y aprende a aprovechar todo su potencial para construir aplicaciones rápidas y eficientes.

Explora el mundo de React Server Components, combinando sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y experiencia de usuario incomparables. Sumérgete en React Server Actions para ver cómo combinan la interactividad del lado del cliente con la lógica del lado del servidor, facilitando el desarrollo de aplicaciones interactivas sin las limitaciones tradicionales de las API.

Obtén experiencia práctica con ejercicios prácticos, ejemplos del mundo real y orientación experta sobre la implementación de estas tecnologías en tus proyectos. Aprende temas esenciales como las diferencias entre Server y Client Components, optimización de la obtención de datos, pasando datos de manera efectiva y maximizando el rendimiento con nuevos hooks de React como useActionState, useFormStatus y useOptimistic.

Ya sea que seas nuevo en React o un profesional experimentado, esta masterclass te equipará con el conocimiento y las herramientas para elevar tus habilidades de desarrollo web. Mantente a la vanguardia y domina la tecnología de vanguardia de React 19. No te lo pierdas: ¡regístrate ahora y desata todo el poder de React!
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
Workshop
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
Workshop
 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