Y Ahora Entiendes los Componentes del Servidor React

Spanish audio is available in the player settings
Rate this content
Bookmark
Kent C. Dodds
Kent C. Dodds
27 min
18 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
En esta charla, Kent C. Dodds presenta los Componentes del Servidor React (RSCs) y demuestra cómo construirlos desde cero. Explica el proceso de integración de los RSCs con la interfaz de usuario, cambiando a RSC y streaming para mejorar el rendimiento, y los beneficios de usar RSCs con componentes asíncronos. Dodds también discute mejoras con streaming y contexto del servidor, soporte al cliente y cargadores, renderización de componentes del servidor y resolución de módulos, manejo de actualizaciones de la interfaz de usuario y renderización, manejo de botones de retroceso y almacenamiento en caché, y concluye con más recursos para profundizar en el tema.

1. Introducción a los Componentes del Servidor React

Short description:

¡Hola, Cumbre de React! Mi nombre es Kent C. Dodds y estoy emocionado de darles esta charla y ahora entienden los Componentes del Servidor React. Vamos a construir Componentes del Servidor React desde cero. Vamos a construir un marco de trabajo basado en los Componentes del Servidor React, y este es uno de los mecanismos que normalmente uso para ayudar a las personas a entender los bloques de construcción sobre los que están construyendo. Aquí están las reglas, esto es como un speedrun de la Leyenda de Zelda, tienes que tener reglas, así que no vamos a usar un empaquetador. No estamos usando ninguna dependencia. Estoy asumiendo que ya eres optimista acerca de los RSEs, no estoy aquí para convencerte de que los RSEs son impresionantes, estás dispuesto a sumergirte en los detalles más tarde. Ya conoces los conceptos básicos de los RSEs, así que useClient no es un nuevo concepto para ti. Y luego también eres lo suficientemente inteligente como para no intentar hacer esto en producción, esto, como dije, muy subóptimo. Es una aplicación de una sola página, así que vamos a empezar con una aplicación de una sola página 100% completa, ni siquiera generada por el servidor o algo así, sólo un servidor o una aplicación de una sola página en el cliente.

¡Hola, React Summit! Mi nombre es Kent C. Dodds y estoy emocionado de darles esta charla y ahora entienden los React Server Components. ¡Deseadme suerte! Ahora, si estuviéramos en persona, les pediría que se despertaran y se levantaran. Si físicamente pueden, únanse a nosotros para hacer algunas sentadillas. No estamos en persona, así que no voy a hacer que hagan eso. Pero si ha pasado un tiempo desde que han hecho fluir su sangre, deberían hacerlo porque su cerebro necesita flujo sanguíneo. Vamos a saltarnos eso por hoy, sin embargo.

Muy bien. Entonces, en diciembre de 2020, cuando se anunciaron los Componentes del Servidor, recuerdo que pensé, sentí algo gracioso al respecto. Dije, todos están muy emocionados por los React Server Components y supongo que yo también debería estarlo, pero me siento realmente indiferente al respecto. Lo cierto es que, hace unos meses, me habría vuelto loco con esto, pero sinceramente, Remix resuelve los mismos problemas ya, así que luego tuve una serie de razones por las que me sentía de la manera en que me sentía. Todavía un poco optimista, pero como que sentía que los problemas que los Componentes del Servidor estaban destinados a resolver no me aplicaban tanto. Me faltaban un par de cosas que los Componentes del Servidor hacen que Remix no podrá hacer sin los Componentes del Servidor, así que por favor perdónenme mi vacilación, pero eventualmente yo me acerqué a los Componentes del Servidor, y ahora he construido un framework basado en los Componentes del Servidor. El mío no está destinado para la producción o algo así, pero sí, esta es la transformación que he tenido, y si están familiarizados con esta escena, es donde los hobbits regresan después de su viaje por Mordor y todo, y han cambiado, y yo me siento de esa manera también, después de haber profundizado un poco en los Componentes del Servidor, y ahora puedo apreciar el valor que hay allí. Sé que quizás algunos de ustedes se sienten así, no entiendo los React Server Components, y en este punto tengo miedo de preguntar, pero mi trabajo es tratar de explicar los React Server Components de tal manera que sea lo suficientemente simple para que ustedes lo entiendan. Ese es mi objetivo, así que deséenme suerte.

Muy bien, así que vamos a construir los React Server Components desde cero. Vamos a construir un framework basado en los React Server Components, y este es uno de los mecanismos que normalmente uso para ayudar a las personas a entender los bloques de construcción sobre los que están construyendo, así que no espero que ustedes realmente hagan esto, pero espero que al construir un framework sobre los React Server Components tengan una distinción mucho más clara de qué son los React Server Components y qué es una cosa del framework y lo que sea. Así que aquí están las reglas, esto es como un speedrun de la Leyenda de Zelda, tienes que tener reglas, así que no vamos a usar un bundler. El bundler sólo nos distraería de la idea central de qué son los React Server Components. TypeScript también, así que no queremos tener ninguna build tools en absoluto, simplemente vamos libres sin TypeScript, y ni siquiera JSX, así que van a encontrar algo de createElement como h, eso es corto para hyperscript, y sí, así que vamos a estar usando createElement, la API de createElement directamente. Afortunadamente no vamos a pasar mucho tiempo en las cosas de JSX, así que están bien, no vamos a hacer ninguna optimización, hay muchas por hacer, pero esto no va a ser algo óptimo, y tampoco estamos usando ninguna dependencia. No quiero que se distraigan con todas las demás cosas extra. Básicamente no tenemos dependencias excepto las cosas oficiales de React, React Error Boundary, y Hano.js. Un par de cosas que voy a dar por sentado, estoy asumiendo que ya son optimistas acerca de los RSEs, no estoy aquí para convencerlos de que los RSEs son impresionantes, están dispuestos a sumergirse en los detalles más tarde, así que vamos a pasar por alto un par de cosas, y siéntanse libres de sumergirse más tarde para los detalles. Ya conocen los conceptos básicos de los RSEs, así que useClient no es un nuevo concepto para ustedes. Y luego también son lo suficientemente inteligentes como para no intentar hacer esto en producción, esto, como dije, muy subóptimo.

Muy bien, con todo eso establecido, aquí está la aplicación en la que vamos a estar trabajando para nuestro ejemplo. Es una vista de lista de detalles, actualiza la URL y todas esas cosas que esperarías. Es una aplicación de una sola página, así que vamos a empezar con una aplicación de una sola página 100% completa, ni siquiera generada por el servidor o algo así, sólo un servidor o una aplicación de una sola página en el cliente.

2. Construyendo Componentes del Servidor React

Short description:

El proyecto se ve un poco así, tenemos nuestra base de datos, nuestro servidor y nuestro directorio de UI. Hacemos una solicitud a nuestra API con la ubicación inicial y usamos un hook para obtener los datos que necesitamos. En el lado del servidor, tenemos un servidor de archivos estáticos y un punto final de API para obtener el barco por su ID. Los RSC implican llamar a una API para obtener la UI renderizada por el servidor. Cambiamos la llamada a la API por RSC y combinamos los datos con la UI en el servidor. Para lograr la componibilidad, hacemos algunas diferencias, importamos react-server-dom-esm-slash-client y lo usamos en nuestro código.

El proyecto se ve un poco así, tenemos nuestra database, tenemos nuestro servidor, este es el servidor Hano.js que tiene un punto final para nosotros, y luego nuestro directorio de UI es todo lo relacionado con la UI. Y luego, aquí hay una pequeña introducción al code con el que vamos a trabajar y modificar con el tiempo. Tenemos nuestra ubicación inicial y nuestra promesa inicial de data, así que estamos haciendo una solicitud a nuestra API con nuestra ubicación inicial que tendrá el ID del barco y cualquier parámetro de búsqueda. Serializamos eso, o deserializamos eso como JSON, y luego estamos usando el hook con esa promesa, y estamos desestructurando los data que necesitamos para nuestra aplicación, y luego esto es nuestro reemplazo para JSX, esta cosa H, createElement como H, pasando estas props a nuestro componente de aplicación. Los detalles específicos no son críticamente importantes para usted en lo que hace este componente de aplicación en este punto. Además, porque estamos haciendo cosas nativas en todos lados, tenemos un mapa de importación en nuestro index HTML, así que cuando decimos importar React y React DOM y React DOM client, estamos extrayendo todos estos de ESMSH, estamos usando la beta de React 19, y sí, esperamos que en un futuro cercano esto sea simplemente React regular. Y finalmente, en el lado del servidor, tenemos un servidor de archivos estáticos para todos nuestros archivos, y luego tenemos un punto final de API para obtener el barco por su ID. También, vamos a tomar los términos de búsqueda, así que estos son básicamente todos los data que necesitas para esta página. Eso incluye nuestro ID de barco, la búsqueda, el barco, y los resultados del barco, que enviamos al cliente en esa carga inicial de la página. Y luego, también tenemos una especie de atrapar todo donde enviaremos ese index HTML. Así que situación típica de SPA sin SSG.

Muy bien. Ahora, hablemos de ello. Vamos de nuestra API a RSC. Así que cuando cargamos la aplicación, estamos haciendo una solicitud para obtener API/barco ID con el término de búsqueda que nos dará todos los data que necesitamos para nuestra aplicación. ID del barco, aquí está nuestra búsqueda, y aquí está el barco y aquí están los resultados para los barcos que coinciden con este término de búsqueda. Esto es bastante típico. Tal vez haces un par de llamadas a la API diferentes, pero en última instancia llamas a una API para obtener tus data. Así que los RSC en realidad no son una cosa enormemente diferente. En lugar de llamar a una API para obtener data, vas a llamar a una API para obtener RSC. Ahora, quiero dejar claro que no tienes que hacer esto a través de una interacción con el servidor en tiempo de ejecución. Puedes hacer esto en tiempo de construcción si quisieras hacer una generación de sitio estático, pero vamos a hacer esto en tiempo de ejecución. Así que nuestro trabajo es cambiar el /API por /RSC, y en lugar de obtener los data aquí y luego combinar los data con la UI en el cliente, en realidad vamos a combinar los data con la UI en el servidor y luego simplemente enviar la UI. Las cosas se ponen un poco interesantes cuando queremos componer las partes interactivas con las partes no interactivas, y por eso no estamos simplemente diciendo, hey, ve a buscarme el HTML e inner HTML todo. Así que vamos a ir un poco más allá de lo que podrías pensar que es la forma más sencilla de hacer esto, pero la razón es porque queremos tener una buena componibilidad con nuestro código del lado del cliente, al que llegaremos más tarde. Así es como logramos esto. Estas son una serie de diferencias que vamos a hacer. Así que primero, para el aspecto del lado del cliente, tenemos nuestro react-server-dom-esm-slash-client. Vamos a necesitar importar esto, por eso lo estamos añadiendo a nuestro mapa de importación, y esto va a ser responsable de algún aspecto de esto. Y luego aquí es donde realmente estamos usando eso.

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.
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.
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
Dominando React Server Components y Server Actions en React 19
React Advanced 2024React Advanced 2024
160 min
Dominando React Server Components y Server Actions en React 19
Workshop
Maurice de Beijer
Maurice de Beijer
¡Llamando a todos los desarrolladores de React! Únete a nosotros para una inmersiva masterclass 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 su máximo 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 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!