Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)

Rate this content
Bookmark

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.

This workshop has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

Una masterclass de componentes de servidor React es una sesión educativa enfocada en aprender y experimentar con React Server Components, una tecnología para renderizar componentes de React en el servidor, permitiendo un enfoque híbrido entre el renderizado del lado del servidor y del cliente.

Los beneficios incluyen una mayor eficiencia en la carga de la página, optimización del rendimiento al reducir la cantidad de JavaScript necesaria en el cliente, y la posibilidad de interactuar con backends y bases de datos directamente desde los componentes del servidor.

La colocación inteligente es una estrategia de optimización que mueve la ejecución de los trabajadores a la ubicación más óptima basada en dónde ocurren las conversaciones más 'ruidosas' o activas con el backend o las bases de datos, mejorando así la latencia y el rendimiento general.

En la masterclass se enseña cómo integrar una base de datos directamente con los componentes de servidor React a través de un trabajador en CloudFlare que maneja las conexiones y las consultas, permitiendo que el componente del servidor interactúe con la base de datos sin exponerla al cliente.

Se recomienda utilizar Node.js, VS Code como editor de código, y Wrangler CLI de CloudFlare para ejecutar y desplegar proyectos que utilizan componentes de servidor React en el entorno de CloudFlare.

CloudFlare ofrece análisis donde los desarrolladores pueden ver el porcentaje de solicitudes redirigidas y entender mejor por qué se tomó la decisión de mover ciertos procesos, basándose en la latencia y la cantidad de subpeticiones generadas por cada solicitud.

 Greg Brimble
Greg Brimble
104 min
14 Nov, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta masterclass sobre componentes de servidor React cubre el renderizado del lado del cliente, el renderizado del lado del servidor con React y los trabajadores de CloudFlare, y el uso de trabajadores para el renderizado del lado del servidor. Introduce los conceptos de componentes de servidor React, suspense, y el trabajador regional. La masterclass también discute las responsabilidades de los trabajadores globales y regionales, optimizando el tamaño del paquete, entregando HTML, y configurando una base de datos. Smart Placement se destaca como una forma de mejorar el rendimiento del trabajador.

1. Introducción a los Componentes del Servidor React

Short description:

Hola a todos. Esta es la primera masterclass sobre los componentes del servidor React. Cubriremos el renderizado del lado del cliente, introduciremos los trabajadores de CloudFlare y exploraremos el renderizado del lado del servidor con React y los trabajadores. También nos sumergiremos en los componentes de React, la carga de datos, la construcción de un compilador y discutiremos la colocación inteligente. Mi nombre es Greg Brimble, ingeniero de sistemas en CloudFlare. Levanta el pulgar si has usado los componentes del servidor React o CloudFlare. ¡Empecemos!

Hola a todos. Entonces, esta es la primera masterclass que he hecho, así que por favor tengan paciencia conmigo si hay algún tipo de problemas técnicos o algo así. Esperemos que sea divertido y aprendamos algo. Va a ser muy interactivo. Tengo código con el que vamos a trabajar. Tengo un par de diapositivas aquí solo para situarnos, pero será principalmente como en un teclado y trabajando en cosas bastante técnicas. Y obviamente, el enfoque aquí son los React componentes del servidor. Así que, estuve en la Cumbre de React en Nueva York ayer y ahora tenemos esta masterclass, así que días felices. Los React componentes del servidor es obviamente un tema bastante candente. Hubo una buena parte de las charlas de ayer dedicadas a los React componentes del servidor. Es realmente genial ver tanto todos los avances tecnológicos que están ocurriendo en este espacio como el interés de todos en intentar adoptar esto, ya sea porque son, como, usuarios que quieren, como, saltar directamente y obtener todas las últimas, mejores características o si son autores de marcos que quieren integrarlo en sus paradigmas existentes y cosas así. Entonces, en esta masterclass hoy, vamos a tomar un poco de un híbrido entre esos dos tipos de usuarios. Entonces, vamos a estar escribiendo componentes del servidor como usuarios de frameworks, pero también vamos a estar haciendo muchas cosas detrás de escena para ver, como, exactamente cómo funcionan los React componentes del servidor y qué se necesitaría para integrarlos en un marco. Entonces, si no sigues absolutamente todo en esto, eso está bien. Es super experimental, como, probablemente todavía va a cambiar. Solo he jugado un poco con esto, así que realmente no sé qué está pasando, pero, como, veremos. Esperemos que saquemos algo de esto. Entonces, lo he desglosado lo mejor que he podido. Veremos, como, uno o dos de ellos son bastante grandes. Entonces, podríamos necesitar incluso tomar un descanso entre algunas de estas secciones. Pero esto es más o menos lo que parece la agenda. Entonces, vamos a empezar con solo, como, React tal como lo conocemos. Entonces, mirando el renderizado del lado del cliente. Y luego vamos a introducir los trabajadores de CloudFlare. Si no lo sabías ya, mi nombre es Greg, trabajo en CloudFlare. Estoy un poco sesgado, pero creo que es una pieza de tecnología genial que encaja en, como, el espacio de desarrollo web realmente bien. Entonces, vamos a estar ejecutando todos nuestros componentes del servidor React con trabajadores hoy. Entonces, como digo, vamos a empezar con el renderizado del lado del cliente. React. Luego vamos a presentar a los trabajadores a todos ustedes. Y vamos a ver entonces qué se necesitaría para renderizar del lado del servidor React con trabajadores. Y luego vamos a adentrarnos en el mundo de los React componentes. Y entonces, vamos a empezar a cargar algunos datos con los React componentes del servidor. Vamos a construir un compilador para los componentes del servidor React, como hacen los frameworks. Luego vamos a cargar realmente algunos datos de una verdadera base de datos. Y luego voy a discutir algo como lo que llamamos colocación inteligente, que creo que es un paradigma de arquitectura realmente interesante que encaja muy bien con el modelo de componentes del servidor React. Entonces, esperemos que a medida que construimos esto, empieces a ver de dónde vengo con eso. Y, sí. Ahí es donde vamos a cerrar esta masterclass.

Soy Greg Brimble. Soy ingeniero de sistemas. Trabajo en CloudFlare, específicamente en el producto llamado páginas de CloudFlare, que es nuestro host de aplicaciones web de pila completa, por eso estoy interesado en todas estas cosas. No es realmente una gran sorpresa para nadie. No sé cómo va a funcionar esto. Pero podemos obtener, como, un pulgar arriba o algo en Zoom para, como, personas que han usado, como, ¿alguien ha usado los React componentes del servidor todavía? ¿Estás usando Next.js y jugando con él? ¿O completamente nuevo en el tema? Un par de pulgares arriba. Vale. Y para cualquiera que esté en Windows, lo siento. Estoy en MacOS. Así que, no estoy 100% seguro de que todo vaya a funcionar perfectamente para ti. Pero cruzando los dedos. Todo es solo Node.js, así que debería estar bien. Y podemos hacer el pulgar arriba de nuevo para cualquiera que esté, como, usando CloudFlare en este momento? Solo para tener una idea de cuánto necesito explicar las cosas. Genial. Una persona que veo. Excelente. Y supongo, bueno, esa persona, ¿estás usando trabajadores por casualidad? Vamos con no. Vale. Entonces, tengo bastante que cubrir. Y el repositorio para esta masterclass es bit.ly. Creo que también es, como, GitHub.com. Voy a ponerlo en el chat. Esa es una solución mucho más sencilla. Y las diapositivas están enlazadas en el leeme del repositorio también. Entonces, en realidad, vamos a mostrarlo a todos. Entonces, aquí puedes ver mis cambios de última hora, hace 33 minutos. ¿Quién sabe qué va a pasar? Las diapositivas están justo aquí. Así que, siéntete libre de seguirlos si prefieres mirar

2. Configuración del Entorno y Estructura del Repositorio

Short description:

La mayoría de las personas aquí ya tienen Node.js y VS Code configurados. Para desplegar junto con nosotros, necesitarás una cuenta de CloudFlare. Si no, puedes hacerlo localmente. Configura rápidamente una cuenta de CloudFlare, verifica tu correo electrónico y ten algo desplegado al final. Clona el repositorio, ejecuta NPM install e instala la CLI de Wrangler. Iniciarás sesión con tu cuenta de CloudFlare. Node 18 debería funcionar, pero Node 20 o 24 también deberían estar bien. Reemplaza el valor constante en el archivo constants TS con tu subdominio de CloudFlare. El repositorio está organizado en siete secciones, cada una con su propio proyecto. Si encuentras errores, puedes saltarte a la siguiente sección. Cada sección se ejecuta en un puerto diferente. Los subdominios de los trabajadores se pueden encontrar en tu panel de control de CloudFlare.

en tu propia pantalla o lo que sea. Volvamos. Un par de requisitos previos. Veo que la mayoría de las personas aquí ya tienen Node.js y cosas así configuradas. Consigue un editor de código, VS Code. Y la otra cosa es si quieres desplegar esto junto con nosotros a medida que avanzamos, entonces vas a necesitar una cuenta de CloudFlare. Si no estás interesado en desplegar esto, no te preocupes. Puedes hacerlo localmente. Pero te recomiendo que configures una cuenta de CloudFlare rápidamente. Solo toma dos minutos. Solo necesitas verificar tu dirección de correo electrónico. Y luego, con suerte, tendrás algo desplegado y en vivo en la internet al final de esto. Eso sería bastante genial. Mientras estoy hablando, si no te importa, simplemente clona esto. Como digo, ábrelo. NPM install. Y luego debería haber una dependencia llamada Wrangler. Wrangler es nuestra CLI. Es lo que vamos a usar para ejecutar este proyecto. Porque como digo, vamos a estar usando trabajadores. Esto viene con todo eso incorporado. Pero en partes, solo lo vamos a usar como una forma de servir activos estáticos. Así que, no es nada loco. Es solo una CLI que nos ayuda con nuestras herramientas. Si te has registrado en CloudFlare o te estás registrando, ¿qué...? Lo siento. Lo siento, Greg. Iba a preguntarte por Wrangler. ¿Con qué te conectas? Así que, cuando ejecutes esto, debería abrirte un navegador. Así que, simplemente ejecuta esto en la terminal. Debería aparecer un navegador. Y luego simplemente inicia sesión con tu cuenta de CloudFlare. No hay nada específico en Node 20. Así que, Node 18 debería funcionar. Solo estoy diciendo lo que usé mientras trabajaba en esta masterclass. Así que, es lo único que puedo garantizar que funciona. Pero sí, no estoy al tanto de nada particular que esté usando Node 24. Así que, deberías estar bien. Como digo, si estás siguiendo esto y quieres desplegarlo a CloudFlare, necesitarás iniciar sesión con Wrangler. Y vas a querer reemplazar este valor que tenemos. Esta constante. En este archivo constants TS. Que creo que está justo en la raíz. Veamos. Sí, constants TS. Si lo abrimos, verás que tenemos esta variable aquí. Y ahora mismo, la tengo configurada para mi cuenta, obviamente. Pero puedes ir a esta URL cuando estés conectado a CloudFlare. Y luego, en la barra lateral, está lo que sea que sea tu subdominio. Y simplemente lo tomas y lo pones aquí. Y luego estaremos listos para desplegar en tu cuenta en lugar de la mía. Y eso es todo. Así que, como digo, tomó un par de minutos hacer eso. Y si alguien está teniendo problemas con alguno de los pasos de configuración, simplemente grita. Pero te daré solo, como, dos minutos o algo así para pasar por todo eso. Y luego, como digo, hemos dividido esto en, como, siete secciones diferentes. Y así, podemos empezar con esas en solo un minuto. Rápidamente te mostraré cómo está organizado este repositorio mientras la gente se está configurando. Así que, tenemos la carpeta más interesante aquí es la carpeta de ejercicios. Como digo, tenemos siete secciones aquí. Y cada una de estas secciones es su propio pequeño proyecto. Y así, tienen, como, un package.json en la parte superior de ellas. Y básicamente son solo duplicados de cada una. Y así, esto va a ser realmente bastante agradable. Porque con suerte, si tienes algún problema, podrás saltarte a la siguiente sección y retomar justo desde donde lo dejaste sin el error que te estaba molestando. Así que, todo es más o menos idéntico a medida que avanzas. Excepto, obviamente, hemos hecho el progreso a medida que te mueves de la sección uno a la sección dos. Y luego, si tenemos una mirada, cuando estamos ejecutando esto, así que estamos aquí en esta, como, primera sección, lo estamos ejecutando en el puerto 8000.1. Y cuando te mueves a la segunda sección, solo para evitar cualquier conflicto o lo que sea, lo estamos ejecutando en el 8000.2. Y eso continúa hasta la sección siete. Así que, ¿dónde puedes encontrar los subdominios de los trabajadores? Así que, deberías poder ir simplemente a tu panel de control. Vamos

Watch more workshops on 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.
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.
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.

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.