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.

 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