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.
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
3. Configuración del Repositorio y la Cuenta
Short description:
Estaba enlazado aquí. ¿Todo claro sobre cómo está estructurado el repositorio? Tengo una pregunta rápida. No tengo la barra lateral derecha mostrando el subdominio en mi cuenta de Cloudflare. ¿Es esta tu primera vez registrándote ahora mismo? Si vas a la barra lateral de la izquierda aquí, ¿puedes hacer clic en trabajadores y páginas? Si haces clic en crear una aplicación y simplemente haces clic en este gran botón azul, eso podría crear uno para ti. Entonces, si tomas el something.workers.dev y lo metes en ese archivo de constantes, deberíamos estar listos. Eso es todo. Deberíamos poder empezar. El primero es el número uno. Estamos hablando de la renderización del lado del cliente. Dejo que todos ustedes intenten trabajar en esto por sí mismos. Feliz de responder preguntas a medida que avanzamos. Siéntete libre de seguir adelante mientras estoy trabajando en ello o podemos simplemente pasar al siguiente. Siéntete libre de trabajar en ello a tu propio ritmo. Esto fue muy parecido a cómo empezó React. Simplemente estamos obteniendo una idea de cómo estamos usando ES build hoy. Empezando bastante fácil.
haz esto contigo en vivo. Dash.Cloudflare.com. Estaba enlazado aquí. Entonces, si vas a esta URL. Entonces, simplemente entra en tu cuenta. Y luego en esta barra lateral aquí abajo, deberías tener tu subdominio. Así que, simplemente tómalo de ahí. ¿Todo claro sobre cómo está todo estructurado el repositorio? ¿Todo tiene sentido para todos? Tengo una pregunta rápida. No tengo la, como, barra lateral derecha mostrando el subdominio en mi cuenta de Cloudflare. Ooh. Interesante. Vale. ¿Es esta tu primera vez registrándote ahora mismo? Sí. Sí. Acabo de registrarme. Vale. Entonces, si vas a, ¿tienes la barra lateral de la izquierda aquí? Como, ¿puedes hacer clic en trabajadores y páginas? Sí. Sí. Tengo eso. Tengo la visión general. Pero sí, puedo crear, como, un trabajador. Hay, como, algunas plantillas disponibles. Sí. Si vas a, como, si haces clic en crear una aplicación y simplemente haces clic en este gran botón azul. Oh, ¿sigo? Sí. Sigo compartiendo. Este gran botón azul aquí. Y luego si simplemente haces clic en desplegar, creo que eso podría crear uno para ti. Y luego podrás ver que esto se está desplegando a algo aleatorio. Eso funciona. Something.workers.dev. Entonces, si tomas el something.workers.dev y lo metes en ese archivo de constantes, deberíamos estar listos. Genial. Sí. Eso tiene sentido. Vale. Sí. Lo tengo ahora. Genial. Brillante. Vale. Genial. Entonces, creo que eso es todo. Deberíamos poder empezar a trabajar. ¿Todos listos? Entonces, déjame reducir el tamaño para todos ustedes. Como digo, se divide en varias secciones. La primera es la número uno. Estamos hablando de la renderización del lado del cliente. Entonces, si realmente vas a esto en tu repositorio local, tenemos este readme dentro de la carpeta de ejercicios número uno. Y establecemos un par de objetivos que vamos a hacer en esta sección. Y luego entramos en el detalle de exactamente lo que estamos haciendo. Entonces, mi plan es dejar que todos ustedes intenten trabajar en esto por sí mismos. Y luego, como digo, feliz de responder preguntas a medida que avanzamos. Les daré unos minutos. Y luego lo repasaré rápidamente yo mismo. Podemos tomar algunas preguntas sobre esta sección. Quizás haga una demostración de algo o lo que sea, y luego pasaremos a la siguiente sección y simplemente enjuagaremos y repetiremos. Entonces, cuando todos ustedes estén listos, siéntanse libres de abrir los ejercicios. Uno renderización del lado del cliente. Abre ese readme y comienza con esta primera instrucción. Vale. Genial. Si aún no has terminado, como digo, no te preocupes. Siéntete libre de seguir adelante mientras estoy trabajando en ello o podemos simplemente pasar al siguiente uno. Esto obviamente seguirá estando disponible en internet después de esta masterclass. Entonces, siéntete libre de trabajar en ello a tu propio ritmo. Entonces, esto fue muy parecido a cómo React primero empezó. Esto es, como, crear el estilo de aplicación React. Como, en el mundo de JAMstack, hace casi 10 años más o menos. Y simplemente estamos obteniendo una idea de cómo estamos usando ES build hoy. Y empezando bastante fácil. Entonces, simplemente voy a, como digo, trabajar en esto muy rápidamente para
4. Creando Página HTML e Introduciendo Workers
Short description:
Comenzamos creando una página HTML y sirviéndola de manera estática. Luego, escribimos código React y lo agrupamos usando ESM. Después de que el JavaScript termina de descargar, el HTML se reemplaza con nuestra aplicación del lado del cliente. También abordamos una pregunta sobre el campo NodeMon e introducimos workers, escribiendo nuestro primer worker que se ejecuta frente a nuestra aplicación.
cualquiera que quisiera verme hacerlo. Entonces, vamos a empezar creando una página HTML. Así que, simplemente volcaremos esto en index.html. Y vamos a ejecutar esto. Entonces, voy a ejercicios, uno guión. Esto va a, si miramos nuestro script de construcción, va a copiar el contenido de nuestro directorio público en uno nuevo, dist global. Así que aquí vemos nuestro index.html. Y lo va a servir en, como digo, 8000.1. Así que podemos abrir esto. Y, oh, mi dios, eso es diminuto. Pero, sí, tenemos nuestro HTML estático siendo servido. Así que, nada loco todavía. Pero luego avanzamos. Y realmente empezamos a escribir algo de React. Así que, vamos a crear un directorio de origen y un app TSX. Volcamos esto en. Así que, ahora realmente tenemos algo de JSX y React. Y luego necesitamos decirle a nuestro HTML que realmente cargue este nuevo script. Así que, cargamos algo de JavaScript aún inexistente. Decimos, hey, carga esta cosa index.js. Y también hemos creado este div root, que es donde vamos a poner la aplicación React. Y luego vamos a crear este index.js. Agarramos eso. Lo metemos en nuestro archivo de origen. Directorio de origen. Y ahora esto debería ser todo nuestro código. Así que, solo necesitamos construir la cosa. Así que, añadimos a nuestro script de construcción un poco más que solo copiar los archivos. Pero ahora realmente queremos agrupar nuestro índice de origen TSX. Para el navegador, vamos a decir, hey, vamos a usar ESM porque somos modernos y geniales. Como digo, vamos a agruparlo y ponerlo en el mismo lugar. Todavía vamos a copiar todos los activos estáticos porque también tenemos algunos archivo de imagen aquí que queremos. Pero si guardamos eso, creo que debería reiniciar. Y si refresco, hey, tenemos nuestra aplicación React del lado del cliente. Así que, tal vez viste por un segundo allí, el flash de contenido. Veamos si podemos capturar eso de nuevo. Y lo que voy a hacer es que voy a ir a la pestaña y voy a ralentizar todo. Vemos que estamos obteniendo esta cáscara de HTML por un momento mientras se carga nuestro paquete de JavaScript. Obviamente, solo estamos haciendo esto en desarrollo, así que, es mucho más grande de lo que sería en una producción. Pero después de un momento de esto, el JavaScript termina de descargar. Se ejecuta. Y luego el HTML se reemplaza con una nuestra aplicación del lado del cliente. Y ahí está ahora. Entonces, si realmente miramos la respuesta de HTML que obtuvimos, podemos ver esto tal vez un poco más claramente. Este sigue siendo el documento de HTML que escribimos. Este index JS que solicitamos es nuestro paquete completo masivo de React. Tiene todo de código React y en algún lugar cerca del fondo probablemente va a ser, supongo, nuestra aplicación. Entonces, sí, aquí está. Este es nuestro párrafo, nuestro hola mundo desde el lado del cliente renderizado React. Entonces, como digo, bastante sencillo. Y solo donde estamos empezando las cosas. Solo revisando las preguntas. ¿Por qué podría el campo NodeMon? Vale. Entonces, sí. He configurado NodeMon para que automáticamente vigile los archivos de su proyecto y también, como, el script de construcción y cosas así. Así que, debería ser reiniciando automáticamente cada vez que guardas el archivo. Y si hay tal vez como un error en el archivo, podría fallar en la construcción o algo así. Debería arreglarse cada vez que, como, arregles el problema. Pero si no, si tienes un problema en algún momento, no dudes en matar el proceso y reiniciarlo. Debería estar bien. Si todavía tiene problemas, probablemente algo anda mal con tu código. Siguiendo adelante. Entonces, un par de personas dijeron que estaban usando CloudFlare. Pero sé que es nuevo para muchos de ustedes. Déjame volver a las diapositivas. Entonces, en esta sección, vamos a simplemente introducir workers. Vamos a escribir nuestro primer worker. No va a hacer nada con React todavía. Solo va a ser algo que ejecutamos frente a nuestra aplicación. Si te inscribiste en CloudFlare, puedes desplegar eso y verlo en vivo. Y luego, sí.
5. Creando el Primer Worker y Desplegándolo en Cloudflare
Short description:
No dudes en saltar a la sección 2 y comenzar a crear tu primer worker. Solo un par de cosas de configuración. Haz clic en visitar el sitio para obtener la URL correcta. A veces puede tardar un minuto o dos para que el nuevo dominio esté disponible. El worker se ejecutará allí y devolverá una respuesta. Estamos a menos de 50 milisegundos del 95% de la población mundial conectada a Internet. Alojar en Cloudflare no es una mala idea.
Hablaré un poco después, como, por qué esto es interesante y cómo se relaciona con cosas. Así que, no dudes en saltar a la sección 2 y comenzar a crear tu primer worker. De nuevo, no es muy grande. Solo un par de cosas de configuración. Devolví la URL, pero no accedí a nada. Tuve que pasar por la interfaz de usuario de CloudFlare y averiguarlo. Haz clic en visitar el sitio para obtener la URL correcta.
Correcto. Entonces, sí. Debería haber añadido una nota. A veces puede tardar un minuto o dos para que el nuevo dominio esté disponible. Así que, espero que eso lo solucione en un minuto. Genial. ¿Alguien más que esté desplegando esto? Dale un momento. A veces puede tomar un segundo para que todo el DNS y todo ese tipo de cosas se pongan en marcha. Pero debería llegar al final.
Vale. Genial. Voy a saltar yo mismo y trabajar en ello. Entonces, lo primero que hacemos es crear este global worker index TSX. Y esto es quizás un poco nuevo para la gente, si no has hecho workers o cualquier tipo de cosas de runtime de borde antes. Pero este export default fetch es un patrón bastante común ahora para cómo interceptas solicitudes. Y lo que esto está básicamente diciendo es que está diciendo, cada vez que una solicitud entra y golpea este worker, queremos ejecutar este bloque de código aquí. Y tenemos algunos tipos aquí en la parte inferior que simplemente están diciendo, como, hey, tenemos este assets cosa disponible para nosotros. Y así, llegaremos a eso en un segundo. Pero empezamos simplemente mirando la solicitud entrante y decimos, hey, ¿a qué URL estás tratando de acceder? Decimos cuando estás llegando a slash date, entonces queremos responder justo como lo haría una API con algún tipo de, como, respuesta programática. De lo contrario vamos a hacer env.assets y vamos a diferir a los estáticos assets que tenemos detrás de este worker. Entonces, como dije, es un worker bastante estereotipado. Muchos de ellos trabajan de esta manera de middleware. Y solo necesitamos construir la cosa. Entonces, agarramos esto y lo metemos en nuestro script de construcción. Así que, ahora no solo estamos construyendo nuestra aplicación del lado del cliente, sino que también estamos construyendo nuestro worker. Y necesitamos ejecutar esa cosa. Construir worker. Podremos mantener estos abiertos. Nos quedaremos entre ellos. Entonces deberíamos poder salir del primer ejercicio, entrar en el segundo. Hacemos npm run dev. Como esto está usando Wrangler, cuando lo abrimos ahora, todavía obtenemos nuestra aplicación del lado del cliente React como antes. Pero ahora si vamos a slash date, obtendremos de vuelta, nuestra respuesta programática. Y por supuesto, esto se mantiene al día con la fecha mientras refresco la página. Eso significa que nuestro worker está funcionando. Genial. Configuramos un proyecto de páginas. Entonces, ya he hecho esto, así que voy a saltarme este paso. Y añadimos un par de cosas a nuestros scripts y package.json. Y lo que estamos haciendo aquí es principalmente cosas de despliegue. Entonces, obtenemos esto. Entonces, estamos diciendo, hey, antes de hacer un despliegue, logramos construir un sitio. Y para desplegarlo, tomamos eso, como, directorio, el directorio público, básicamente. Decimos, hey, queremos desplegarlo a proyecto que acabamos de crear. Y lo que esto hará es que desplegará la aplicación en la red de Cloudflare. Y luego eso subirá todos nuestros activos estáticos. Subirá el worker. Y luego si abro esto, con los dedos cruzados, tenemos nuestra aplicación del lado del cliente funcionando. Y estúpido Zoom. Podemos ir a slash date en él y ver nuestro worker también. Entonces, esto es justo como lo estábamos haciendo localmente, pero ahora está realmente en internet, lo cual es bastante genial. Entonces, déjame cerrar ambos. Y abrir esto. Entonces, cuando digo que está funcionando en internet, realmente lo está. Esto es lo que Cloudflare es probablemente más famoso. Hemos construido esta red global masiva. Tenemos centros de data en todo el mundo. Y cualquier usuario de cualquier lugar puede simplemente conectar a su centro de data local, el que esté más cerca de ellos. Y ese worker se ejecutará allí y devolverá una respuesta. Significa que es realmente rápido para prácticamente cualquier persona que acceda a esto en todo el mundo. Específicamente, esto es muy genial. Estamos a menos de 50 milisegundos del 95% de la población mundial conectada a Internet. Independientemente del tipo de negocio en el que estés trabajando, si tienes
6. Introducción a Workers y Pages
Short description:
Hablamos sobre workers y dónde aprender más sobre ellos. Pages y workers se utilizan indistintamente en esta masterclass. Pages sirve activos estáticos, mientras que workers potencia el cálculo.
usuarios en todo el mundo, alojar en Cloudflare no es una idea terrible. Hablamos un poco sobre workers. Entonces, si quieres aprender más sobre workers, este es el lugar para ir. Es los desarrolladores.cloudflare.com. Tenemos toda nuestra documentation, lo que puedes hacer en un worker, algunas guías y recorridos, ese tipo de cosas. Más información sobre Wrangler. Y luego una cosa que simplemente pasamos por alto fue el hecho de que estamos usando pages. Pages y workers están en camino a converger. Nos está llevando un tiempo porque son muy complicados. Pero estamos usando un poco indistintamente aquí en esta masterclass. Así que, no te preocupes demasiado por los detalles de cuándo estamos usando qué. Estamos usando pages para servir los activos estáticos y workers para potenciar el cálculo.
7. Uso de Workers para la renderización en el lado del servidor
Short description:
Los workers pueden ser utilizados como middleware o para desplegar aplicaciones completas. Comenzaremos a usar workers para la renderización en el lado del servidor de nuestra aplicación React. Si tienes alguna pregunta, no dudes en preguntar. Si tienes problemas de autenticación, intenta desactivar tu VPN o crear un token de API. Estamos utilizando React NM porque los componentes de servidor de React son experimentales. Asegúrate de seguir los pasos y actualizar los archivos necesarios. Rworker reemplaza el ejemplo con un componente renderizado en el lado del servidor.
De nuevo, desarrolladores.cloudflare.com. Bien. Así que esas son las dos secciones introductorias. Y déjame ver. Lo siento, había un par de preguntas. Entonces, los workers son como middleware, sí. Pueden serlo. Eso es más o menos cómo empezaron. Muy en esta moda de middleware. Ellos como se sitúan frente a algún host aguas arriba. Pero cada vez más personas están desplegando aplicaciones completas en workers. Y eso es más o menos lo que estamos haciendo aquí. Así que no hay servidor. Se despliega en todas estas ubicaciones y lo configuras y lo olvidas. Lo cual es realmente lo que me resulta tan interesante acerca de esta architecture. Si no hay más preguntas sobre esa sección, pasaremos a la tercera. Así que, esto es como digo donde las cosas empiezan a ponerse interesantes. Esta sigue siendo relativamente fácil. Prometo que las siguientes se vuelven mucho más complicadas. Pero vamos a empezar realmente a usar workers aquí para realmente renderizar en el lado del servidor nuestra aplicación React. Así que, empezamos con como Jamstack, ¿verdad? Aplicación React. Y estamos más o menos ahora moviéndonos hacia tal vez no sé, cinco, seis años atrás cuando la gente empezó a renderizar en el lado del servidor React. Y vamos a hacer eso en workers. Así que, sí, no dudes en salir del dos y moverte al tres. Y empieza cuando estés listo. Un par de cosas más sucediendo aquí. Pero lo revisaremos cuando lleguemos a ello. Como siempre, simplemente salta con cualquier pregunta si la tienes.
Ryan, ¿tienes quizás una VPN o algo localmente que está interfiriendo con tus conexiones? Básicamente lo que sucede es que Wrangler inicia un servidor local y luego te redirige a el Dashboard de Cloudflare y luego ese Dashboard de Cloudflare, una vez que haces la authentication, te redirige de nuevo a ese servidor local con algún código. Y debería entregar esa información de authentication a Wrangler. Si estás teniendo problemas, creo que hay otra forma de iniciar sesión. Déjame comprobar aquí. Vale. Sí, hay quizás quieras probar este paso. Así que, déjame ver. VPN apagada. Vale. Echa un vistazo y ve si esta es una opción para ti. Y luego lo otra cosa, si eso no funciona, es que puedes ir al Dashboard de Cloudflare, y si vas a tus tokens de API, deberías poder crear uno. Y luego puedes establecer esto como una variable de entorno en tu sistema, y eso esperemos que recoja eso para la authentication en lugar de tu token que está fallando. ¿Por qué estamos usando React NM en lugar de Node modules? Es una muy buena pregunta, y yo simplemente lo solté aquí con la intención de volver a ello más tarde. Así que, la razón por la que estamos usando eso es porque, como digo, mucho del componente de servidor de React todavía es experimental. Y, de hecho, he tenido que ajustar una o dos cosas pequeñas para hacer que funcione bien en el entorno de los workers. Y así, simplemente tenemos esto, como, un fork aquí, básicamente, del repositorio de Facebook React construido aquí localmente al que puedo hacer referencia. Y así, y lo que realmente, creo que lo único que realmente usamos aquí es React server DOM ESM. Así que, siéntete libre de echar un vistazo, pero llegaremos a ello más tarde. Como digo, son sólo un par de cosas pequeñas que tuve que ajustar para que funcionara bien. Pero espero que podamos, como, una vez que esto esté un poco más pulido, en general, lo tendremos en upstream. Y así, esto no será necesario. Cuando haces clic en el enlace en el navegador, dice asegúrate de que tienes este div en tu HTML archivo. Vale. Parece que quizás te has saltado un paso en algún lugar. Déjame ver dónde va a ser eso. Así que, creo que asegúrate de que suena como algo que yo escribiría. Me estoy preguntando si está apareciendo. Así que, estamos en el tercer paso. Necesitas echar un vistazo a este paso aquí. Así que, una vez que ejecutas npm run dev, las cosas no funcionan, y tal vez esté un poco roto. Necesitas coger este source index TSX. Exactamente. Gracias, Phil y Cedric. Y eso es sólo una cosa más que necesitamos actualizar. Vale. Así que, voy a pasar por esto yo mismo ahora. Así que, Rworker es muy similar a cómo lo teníamos antes, pero ahora también estamos reemplazando nuestra cosa de fecha, que es un ejemplo, con una cosa realmente renderizada en el lado del servidor. Así que, vamos a traer algunas bibliotecas de React, React DOM aquí, y esta función útil que convierte una aplicación React en HTML. Y así, esto está produciendo un stream de HTML para nosotros. Vamos a decir, hey, navegador, cuando
8. Actualización de la Aplicación Fuente y Transferencia de Control
Short description:
Actualizamos nuestra aplicación fuente para estar a cargo de todo el documento HTML. Añadimos un nuevo componente de contador para la renderización en el lado del servidor y la interactividad en el lado del cliente. El índice fuente se simplifica reemplazando todo el documento con nuestra aplicación. Después de entregar el documento renderizado en el lado del servidor, entregamos el control al cliente. El cliente carga index.js e hidrata la aplicación, haciéndola interactiva. Los componentes del servidor React difuminan la línea entre el control del servidor y del cliente. Este es solo el primer concepto de transferencia de control. ¿Alguna otra pregunta?
cuando veas esto, es HTML. Confía en nosotros. Como antes, sirve activos estáticos de lo contrario. Voy a abrir esto correctamente ahora. ¿Qué vamos a hacer aquí? Ah, sí. Actualizamos nuestra aplicación fuente para no ser solo lo que era, solo un par de elementos dentro del DOM. Vamos a hacer que esté a cargo de todo el documento HTML. Y así, como digo, esto podría parecer un poco extraño para las personas si no han usado React en una aplicación de renderización en el lado del servidor antes, pero es totalmente válido. Las cosas que tenemos que hacer están en el índice fuente, al que llegaremos en un segundo. Bien. Un nuevo componente solo por diversión, que es nuestro contador. Y esto es solo para asegurarnos de que nuestro trabajo en el lado del servidor funciona, pero también somos capaces de hidratar la aplicación y hacer interactividad en el lado del cliente. Solo estamos añadiendo esto para asegurarnos de que todo sigue funcionando bien, y luego lo añadimos a nuestra aplicación. Y luego, como digo, el índice fuente se simplifica mucho, porque ya no necesitamos encontrar ese div específicamente. Podemos reemplazar todo el documento con nuestra aplicación. Y finalmente, solo necesitamos hacer esto es la parte de la transferencia. Entonces, hemos hecho la renderización en el lado del servidor y la parte de hidratación en el lado del cliente. Solo necesitamos decir una vez que hayas entregado el documento renderizado en el lado del servidor, necesitas entregar correctamente al cliente. Entonces, carga nuestro index.js como antes. Y así, creo que eso fue todo. Ejecutemos esto yo mismo. Sección 3, Dev, y si abro el 8003, sí, aquí vamos. Entonces, tenemos nuestro React renderizado en el lado del servidor, lo cual es muy genial. Tenemos nuestra interactividad en el cliente. Todo parece estar funcionando bien. Entonces, si abro DevTools de nuevo, desactivaremos la limitación. Ya no necesitamos eso. Pero echaremos un vistazo a la respuesta que estamos obteniendo, porque es interesante. Si nunca has hecho renderización en el lado del servidor antes, notarás aquí que nuestro componente cliente, el contador, solo está obteniendo este valor predeterminado en este HTML. Entonces, si tuviéramos JavaScript desactivado, eso es lo que obtendríamos. Si fuéramos un motor de búsqueda llamando a la página, veríamos que la página está funcionando, veríamos que la página está funcionando, veríamos nuestro estado predeterminado de cero. Y solo una vez que cargamos index.js e hidratamos en el cliente, esto se vuelve realmente interactivo y útil. Creo que eso fue todo. Veamos. ¿Algo más en mis notas? Sí. Eso es prácticamente todo. Entonces, este es solo el primer tipo de concepto que hemos introducido de, como, transferencia de control. Entonces, el control está en el servidor para empezar cuando renderiza el documento, y transfiere el control al cliente una vez que ese documento ha sido entregado. Ha cargado el JavaScript. Y luego esta cosa redibuja completamente la aplicación. Y ahora el cliente está a cargo. Entonces, los React server components realmente difuminan eso y se vuelven mucho más complicados. Por eso estamos empezando con un ejemplo relativamente sencillo de control limpio. Pero, sí, eso es todo hasta ahora. ¿Alguna otra pregunta? Realmente no. Tengo una pregunta rápida, porque vi que esto estaba usando, como, el stream, como, streams, mientras creaba el HTML. Pero en realidad no veo, como, streams. Solo veo, como, una solicitud pasando. ¿Es solo porque es muy pequeño? Sí. Entonces, creo que el render to readable stream, creo que esto, como, se divide en saltos de línea. Es realmente un poco extraño. Entonces, podrías reemplazar totalmente esto con render to, creo, es solo render to string y obtener exactamente la misma funcionalidad aquí. Y como dices, nuestra aplicación es realmente, realmente pequeña. No estamos haciendo nada digno de streams. Lo hacemos muy pronto. Así que, aguanta un momento. Pero, sí, fui con streams desde el principio, porque,
9. Introducción a los Componentes del Servidor React
Short description:
Entonces, esta es la primera vez que realmente comenzamos a usar los componentes del servidor React. En este repositorio, introducimos el uso del pragma del servidor y del cliente, así como suspense. Podemos agregar un componente de servidor adecuado optándolo en los componentes del servidor. Toda esta función es asíncrona, lo que nos permite realizar acciones como una búsqueda de peso.
como digo, lo usaremos en un momento. Entonces, en lugar de simplemente cortar y cambiar por todas partes. Te entiendo. Entonces, este es el mismo que el renderizado a cadena. Es solo que si tuvieras, como, varios documentos o muchos saltos de línea, dividiría las cargas útiles para que sean más pequeñas. Sí. Entonces, renderizar a cadena esperará a que el documento esté listo. Y luego lo entregará todo de una vez. Mientras que renderizar a un stream legible, cuando esté disponible, enviará piezas tal como vienen. Sí. Tiene sentido por qué he visto a personas en repositorios con una línea después de cada archivo. Sí. Entonces, parte de eso es solo, como, los valores predeterminados de prettier y cosas así. Entonces, lo tengo aquí. Y no estoy seguro de si eso está teniendo algún impacto. Porque para cuando lo agrupamos y cosas así, todo eso puede estar perdiéndose. Pero se volverá muy claro en solo, creo, posiblemente incluso el próximo ejercicio. Así que, guarda ese pensamiento. Vale. Genial. Sí. Salud. Entonces, ¿cómo va el ritmo para todos? He estado pasando por esto solo a mi propio ritmo. Pero, ¿estamos todos contentos? O ¿demasiado rápido? ¿Demasiado lento? ¿Contento? Genial. Muy bien. Entonces, la siguiente sección es realmente la introducción a los componentes de React. Y React antes era completamente del lado del cliente. Pero los componentes de React introducen un ciudadano de primera clase adecuado para renderizar data. Como, para buscar data. Entonces, eso es realmente, realmente poderoso. Y es con lo que vamos a empezar a jugar. Entonces, echa un vistazo. Sal de tres y entra en cuatro. Aquí es donde comenzamos a usar el servidor. Y entonces, realmente comenzando a entrar en los componentes del servidor. Si no has hecho esto antes, puede que sea algo nuevo. Pero sí. Haz un intento. Y entonces Creo que después de esta sección, tal vez hagamos una pausa. Ya hemos estado trabajando durante una hora. Sí. Si quieres salir antes de eso, siéntete libre. Pero después de esta sección, tendremos un descanso de 5, 10 minutos o algo así. Sí. Comienza cuando estés listo. ¿Mi cámara se ha roto para alguien más? Parece haberse congelado para mí. Pensé que estabas buscando el efecto de fuegos artificiales. Creo que eso colapsó mi Mac o algo así. Vale. Intentaré averiguar eso mientras todos trabajan en la sección cuatro. Bueno, en interés del tiempo, yo mismo comenzaré. Entonces, como digo, esta es la primera vez que realmente comenzamos a usar los componentes del servidor React. Y en este repositorio, en este repositorio. Entonces, eso es genial. Introduciendo cosas como el uso del servidor y del cliente, pragma. Y también agregamos algo de suspense aquí. Tal vez algunas personas lo usen por primera vez. Sí, puedes actualizarlo a 50 segundos, en lugar de cinco segundos. Pero cinco segundos deberían ser suficientes. Genial. Entonces, todo lo que necesitamos hacer para nuestro contador es simplemente agregar nuestro pragma de uso del cliente. Un día mantendré el readme abierto. Y luego, como digo, si simplemente ejecutas npm run dev aquí, nada cambia. No es fundamentalmente mágico. Vamos a tener que agregar todo esto a nuestro compilador, nuestra cadena de herramientas ES build en un poco. Pero podemos comenzar a ver dónde se pone interesante cuando agregamos use server a nuestra aplicación. Y básicamente, solo optamos por esto en los componentes del servidor. Y eso nos permitirá agregar, como, un componente de servidor adecuado. Entonces, toma esta pieza, colócala en todo. Y, sí, lo que hay que notar aquí, es que toda esta función es asíncrona, lo cual no es el caso de los componentes estándar de React. Y porque es asíncrona, somos capaces de hacer cosas como una búsqueda de peso, lo cual es bastante genial.
10. Introducción a Suspense y Manejo de Componentes Asíncronos
Short description:
El componente suspense nos permite manejar componentes asíncronos y proporcionar una alternativa mientras se cargan. Podemos ver que el SSR aún funciona, y la alternativa de carga se reemplaza con los datos una vez que están listos. Sin embargo, todavía se están produciendo solicitudes del lado del cliente, lo que puede causar errores. Necesitamos construir esto en nuestro empaquetador para manejarlo correctamente. El componente suspense envuelve un componente renderizable, mientras que el hook use es específicamente para esperar valores prometidos. Eliminar el componente contador de la aplicación no evita que el código React se envíe al navegador.
Obviamente, realmente difumina la distinción entre backend y frontend, cuando puedes hacer este tipo de cosas dentro de tu aplicación React. Y ahora solo incluimos esto en nuestro app TSX. Y envolvemos todo en un suspense. Entonces, suspense, para aquellos que no están familiarizados, es solo una forma de lidiar con estos componentes asíncronos de una manera un poco más limpia. Puedes proporcionar una alternativa, que es lo que se muestra mientras se carga esto. Sí, exactamente. Entonces, solo una forma de llegar a eso. Siéntete libre de cerrar la pestaña, si está bajando tu conexión a Internet. Pero, sí, si subo a cuatro y ejecuto dev. Y abro esto. Nuestra aplicación funciona. Y tenemos nuestros todos en la parte inferior, lo cual es genial. Podemos echar un vistazo a nuestra pestaña de red. Deberíamos ver que el SSR todavía funciona. Todavía estamos, como, obteniendo esto como HTML originalmente. Esto va a ser genial para los motores de búsqueda o lo que sea. También puedes ver algunas cosas interesantes aquí. Tenemos esto, como, plantilla, que tiene algún tipo de identificador. Esta es nuestra alternativa de carga que teníamos. Y luego tenemos esto, como, este div, que está oculto. Lo que sucede aquí es que el documento primero muestra esa alternativa. Y una vez que los data están listos, lo reemplaza con la lista de dos. Pero agregamos un retraso aquí, diciendo, como, espera 5,000 milisegundos, 5 segundos, antes de devolver realmente una respuesta. Esto está en caché o algo así. Sí. Tal vez necesito 50,000. ¿Estropeé eso? No estoy seguro de lo que está pasando allí. Pero, sí, eso es súper raro. Correcto. Vemos esto parpadear por un segundo. Esperaría que fueran cinco segundos, no estoy seguro de lo que está pasando con el retraso allí. Tal vez estropeé el parámetro o algo así. Vemos que parpadea con la carga y luego obtenemos los data intercambiando, que es lo que esperamos. Pero, sí, como alguien señaló en el chat, todavía estamos viendo estas solicitudes que ocurren del lado del cliente. Y en algunos casos, como, simplemente se va exponencialmente y bloquea la aplicación, por eso dije que a veces esto podría dar un error para ti. La razón por la que está haciendo esto, nuestro paquete del lado del cliente todavía tiene toda nuestra aplicación, incluyendo el 08 fetch. Aunque marcamos esto como servidor de uso, aún no lo estamos manejando. Esto todavía se está empaquetando al cliente, y el cliente está tratando de ejecutarlo. Hace lo mejor que puede, pero, como dije, es un poco inestable. Necesitamos construir esto en nuestro bundler. Eso es lo que va a suceder en el próximo paso. Otras preguntas. ¿Puedo usar el componente suspense para cualquier función que devuelva una promesa? Entonces, suspense se supone que está envolviendo un componente. Entonces, como, espera a sus hijos. Entonces, lo que sea que, como, uses suspense para, necesita ser capaz de ser renderizable, creo. Pero hay otro hook llamado use, que se ve así. Importas use de React. Y esto es solo, como, useState o useEffect o lo que sea, pero esto es específicamente para esperar valores prometidos. Y entonces, creo que mostramos eso más tarde también. Y si tienes solo, como, data que quieres esperar, puedes usar esto. O si tienes un componente asíncrono, puedes simplemente esperarlo directamente. Si eso no responde a tu pregunta, avísame. ¿Va a haber un retraso para mí, incluso en la recarga? Vale. Genial. Yo solo voy a atribuir eso a que mi computadora está siendo rara. Entonces, bien. Al menos funciona para alguien. Si eliminamos el componente contador de la aplicación, no se envía ningún código React al navegador. Um, no creo que eso sea cierto en este momento. Porque aún no hemos hecho nada de, como, cosas del bundler. Será cierto. Entonces, espera un momento. Pero creo que si yo elimino esto en este momento, todavía vamos a obtener la lógica para, como, manejar el suspense y cosas así. Veamos. Carga. Sí. Entonces, todavía estamos entregando todo de React y todas nuestras aplicaciones. Entonces, como, el contador no estará incluido aquí. Pero es
11. Introducción al Trabajador Regional y Configuración
Short description:
Vamos a introducir una nueva funcionalidad para los componentes de servidor de React, que nos permitirá mantener las cosas aisladas y pensar en nuestra aplicación de manera diferente. La nueva pieza que estamos construyendo, el trabajador regional, es necesaria para los componentes de servidor de React y se ejecuta en el servidor para manejar la nueva funcionalidad en React 18. Estamos añadiendo un segundo trabajador para lidiar con ello. Trabajaré en ello yo mismo y copiaré el código en una nueva carpeta. La semántica del trabajador regional es ligeramente diferente del trabajador global, ya que definimos una URL base y una transformación para configurarlo.
todavía vimos esa cosa cargando. Y para que sea reemplazado, necesita que React pueda saber cómo manejar eso. Bien. Así que, hemos estado yendo una hora 15. Si no hay otras preguntas en la sección 4, entonces digamos que volveremos a las 25 pasadas. Nos da a todos un descanso de diez minutos. Si eso está bien con todos. Y luego vamos a entrar en la parte realmente sustanciosa, que es realmente construir este, como, compilador adecuado con ES build y cosas así. Así que se pone un poco complicado. Como ves, vamos a estar en esto durante, como, una hora. Así que sí. Aprovecha bien este descanso. Y nos vemos a las 25 pasadas. La próxima sección, como dije, es donde las cosas empiezan a ponerse bastante complicadas. Así que, muchas de estas cosas están realmente detrás de escena. Si eres simplemente un usuario de los componentes de servidor de React, casi nunca necesitarás pensar en estas cosas. Debería ser manejado por el marco para ti. Pero como estamos interesados en aprender y queremos jugar con esto, vamos a intentar hacer algunas de estas cosas nosotros mismos. Así que, vamos a adentrarnos bastante en, como, las entrañas de ES build. Y vamos a empezar realmente a ser conscientes de lo que estamos produciendo. Así que, antes empezamos con solo un paquete de cliente. Luego introdujimos, como, el paquete de servidor. Y así, produjimos un trabajador, que estaba haciendo la renderización del lado del servidor y luego lo entregamos completamente al cliente. Pero el modelo de los componentes de servidor de React es mucho más flexible. Y por lo tanto, necesitamos darle mucha reflexión a exactamente lo que estamos produciendo para cada uno de nuestros diferentes, como, lugares. Así que, vamos a empezar por introducir una tercera cosa. Así que, tenemos la pieza de renderización del lado del servidor. Tenemos la pieza del cliente. Vamos a introducir una nueva cosa específicamente para los componentes de servidor de React. Va a permitirnos mantener las cosas tan aisladas como podamos. Y también va a apoyar por qué estoy hablando de la colocación inteligente más tarde. Simplemente te permite pensar en tu aplicación de manera diferente. Así que, si corto todo esto y todo el material de la sección 4, como siempre, léeme aquí con los pasos a seguir. Una gran advertencia en la parte superior diciendo que no te preocupes si no lo entiendes todo. Está bien. Es, como digo, material difícil. Como, complicado. Así que, empieza. Y luego si puedo, haré una pequeña sugerencia ad hoc, que creo que es cuando llegas a esta parte, donde dice, como, ahora eso es mucho. Veremos cómo vamos en cuanto a tiempo. Pero si puedes, publica en el chat cuando llegues a ahí. Ahora eso es mucho. Tenemos este trabajador regional construido. Permíteme juzgar si necesitamos tomar un descanso a mitad de camino o lo que sea. Pero, sí. Siéntete libre de saltar y buena suerte. Como digo, siéntete libre de seguir adelante si estás contento. Pero siéntete libre de tomar un descanso conmigo si quieres. Así que, cuando introducimos la pieza de renderización del lado del servidor, piensa en eso como algo realmente agradable de tener. Es opcional. Obviamente, hay toneladas de aplicaciones todavía por ahí usando React que son completamente del lado del cliente. El lado del servidor simplemente te da una renderización más rápida de la página. Es mejor para SEO. Y por eso la gente lo adoptó. Pero esta nueva pieza que estamos construyendo aquí, este trabajador regional, esto es necesario para un componente de servidor de React. Necesitas algo que se ejecute en el servidor para hacer todas estas piezas con la nueva funcionalidad que viene con React 18. Así que, es un paradigma totalmente diferente. Y por lo tanto, estamos añadiendo un segundo trabajador para lidiar con ello. Simplemente voy a trabajar en ello yo mismo hasta ese punto. Así que, voy a copiar este código en una nueva carpeta, nuestro trabajador regional index.tsx y lo voy a volcar ahí. Y simplemente voy a coger el script de construcción aquí, lo añado. Y voy a construir. Y así que, si simplemente conecto esto. Esto es muy similar al trabajador global en algunos aspectos. Si los comparamos y nos alejamos un poco, en ambos estamos importando algo renderizar a readable stream. Y en ambos casos, es como, importar nuestra aplicación y, como, obviamente renderizarla. Pero ves, como, la semántica es un poco diferente. Así que, en el trabajador global, cuando estamos haciendo SSR, somos capaces de, como, arrancar modules y se encargó de inyectar en nosotros las cosas del cliente. Y aquí, en cambio, estamos teniendo que, como, definir una URL base y esta cosa de transformación. Y esto es sobre la configuración del trabajador regional. Así que, tiene conocimiento sobre dónde encontrar todos los componentes que va a inyectar todos los componentes que va a usar cuando está tratando de renderizar esta aplicación.
12. Entendiendo los Trabajadores Globales y Regionales
Short description:
Hemos dividido el inicio y el despliegue en versiones globales y regionales. Al ejecutar los comandos de construcción y inicio de la región en un puerto diferente, obtenemos una estructura DOM serializada que React entiende. Esto permite la transmisión fuera de orden. El trabajador regional es responsable de generar el DOM serializado. El trabajador global realiza SSR y convierte el DOM serializado en HTML. El navegador inicia la solicitud, que pasa por el trabajador global, el trabajador regional de RSC, y vuelve al navegador para la hidratación del lado del cliente.
Entonces, lo que podemos hacer en este punto es que creo que en realidad, creo que necesitamos hacer un poco más. Simplemente copiando los scripts. Voy a adelantarme solo un poco. Los coloco aquí. Entonces, todo lo que hemos hecho es que hemos dividido el inicio en dos cosas. Inicio global y regional. Y lo mismo con el despliegue. Y solo vamos a ejecutar el regional. Entonces, voy a escribir uno. Voy a hacer una construcción manualmente. ¿Qué he hecho mal? He estropeado mis importaciones. Ahí vamos. Una construcción. Déjame asegurarme de que está bien en el read me para todos ustedes. No, creo que lo he soltado. Está bien. Lo subiré en solo un segundo para cualquier otra persona. Y ejecuto esta construcción. Y luego hago npm run start para la región. Y esto oh, no. Está bien. Hay un par de cosas que necesito hacer. Una más también. Lo siento. Ahí vamos. Ves que estoy ejecutando esto en un puerto completamente diferente. Este es el 9005. Anteriormente estábamos haciendo el 8005. Y si solo hago curl a esto, ves que obtenemos un montón de galimatías. Esto no es HTML como lo conocemos. Y esto es, de hecho, solo una estructura DOM serializada que React es como React posee esto. Es algo que entiende. Y puedes ver que estamos haciendo las cosas en un orden extraño. Entonces, lo primero que hacemos, como, lo que esto es responsable de como vimos en nuestro código del trabajador regional, se supone que esto debe estar renderizando nuestra aplicación. Pero en cambio está devolviendo esto. Y lo primero que hace, dice, aquí está el contador. Luego hace algo de suspense. Luego vuelve al HTML y entrega un montón de cosas tipo HTML. Y luego hace todas nuestras tareas pendientes. Y puedes ver que hay estas referencias en todo, como, l1, dólar dos, dólar l3. Eso se refiere a estos fragmentos que están, como, etiquetados en este árbol. Y está diciendo, como, oye, necesitas colocar esta pieza en donde encuentres este símbolo. Y entonces, esto es lo que está habilitando nuestra transmisión fuera de orden que obtienes con React. Entonces, como digo, no se supone que debas, como, leer esto. Esto es algo interno para React. Pero está ahí si quieres echar un vistazo. Y esto va a ser lo que nuestro trabajador regional es responsable de. Entonces, vamos a seguir teniendo nuestro trabajador global. Eso va a estar haciendo SSR. Ahora hemos introducido este trabajador regional que va a estar haciendo RSC. Y obviamente vamos a tener el navegador que está haciendo toda la interactividad. Intenté esbozar esto mientras todos ustedes estaban trabajando en esto. Entonces, el navegador inicia las cosas, hace una solicitud para, como, barra. Primero golpea a este trabajador global. El trabajador global, como digo, va a intentar y hacer SSR. Pero antes de que pueda hacer SSR, necesita saber, como, ¿cuál es la aplicación que se supone que debo estar renderizando? Anteriormente estábamos importando la aplicación directamente aquí. Pero en cambio lo que vamos a hacer es que vamos a preguntar al trabajador regional de RSC por este DOM virtualizado, como, el DOM serializado. Y va a construir esto y enviarlo de vuelta. Y puede hacer lo que quiera para generar eso. En nuestro caso, estamos consultando alguna API de tareas pendientes o lo que sea. Podría estar hablando con una database. Podría estar haciendo cualquier cosa que quiera. Pero el punto es que genera esa corriente de DOM serializado. Y luego el trabajador global, cada vez que recibe bits y piezas de vuelta en esa corriente, hace el SSR y convierte eso a HTML y lo entrega de vuelta al navegador. Y luego esto hidratará los componentes del cliente. Eso es lo que parece toda esta architecture. Y solo quería poner eso en sus cabezas mientras avanzan en el resto de este quinto ejercicio. Porque, como digo, es mucho para mantener en tu cabeza. Entonces, espero que eso ayude a desglosarlo un poco.
13. Configurando el Worker y Avanzando
Short description:
Siéntete libre de continuar desde la ejecución de esta construcción y luego configurar el worker. La mayoría de esto es solo cosas que siento que deberían estar incorporadas directamente en node o esbuild. No, no deberías necesitar un conector de Cloudflare en esto localmente. Todo debería funcionar en tu propia máquina sin una cuenta de Cloudflare. Simplemente omite los pasos de despliegue. Si estás obteniendo una colisión de puerto o algo así, puedes cambiar estos puertos a lo que quieras. Si intentas npm run deploy, esto está usando el subdominio de los workers de Cloudflare. Constante. Si eres una cuenta completamente nueva, es posible que necesites desplegar un worker primero. Haz clic en sí, sí, sí, sí. Acepta. Una vez que tengas ese subdominio, lo introduces aquí. No dados. Bueno. Tal vez aguanta un momento. Podemos intentar desplegar como seis. Ejercicio seis. Y es una pizarra limpia. Porque eso es básicamente como cinco completados. Entonces, podrías tener suerte allí. ¿Eso creó un segundo worker? Dejó de funcionar después de eso. Error de Windows. Interesante acerca de los puertos. Sí, avísame qué es y si puedo ayudarte a solucionarlo. Bueno. Creo que voy a empezar a pasar por el resto de esto yo mismo. Entonces, llegamos hasta la ejecución del worker RSC. Veamos dónde está esto en este archivo. Sí. Entonces, básicamente llegamos hasta aquí. Teníamos el Wrangler region toml. Teníamos nuestros nuevos scripts. Y teníamos nuestro constructor y el propio worker RSC. Así que, avanzando.
Y pero te dejaré volver. Y así estábamos justo en esta sección aquí. Así que siéntete libre de continuar desde la ejecución de esta construcción y luego configurar el worker. Y básicamente llegamos hasta aquí, de hecho. Eso es lo que acabamos de ejecutar. Como, ejecutamos esto en el script de construcción. Y es 9,005. Entonces, si quieres echar un vistazo detrás de la cortina aún más, hay un par de piezas, creo, en el script de construcción donde estoy cargando desde este directorio de utils que está justo aquí en la raíz. Y entonces, puedes echar un vistazo a, como, lo que está haciendo el cargador predeterminado con esbuild. Si estás interesado. La mayoría de esto es solo cosas que siento que deberían estar incorporadas directamente en node o esbuild. Es por eso que lo saqué. Pero sí. Si quieres entrar en los detalles, está todo ahí. No, no deberías necesitar un conector de Cloudflare en esto localmente. Todos deberían ejecutarlo en su propia máquina sin una cuenta de Cloudflare. Simplemente omite los pasos de despliegue. Y luego, introducimos una database. Y de nuevo, simplemente omite las partes remotas de eso si quieres mantenerlo local. Entonces, si estás obteniendo una colisión de puerto o algo así, puedes cambiar estos puertos a lo que quieras. Y entonces, es quizás la cosa de autorun de nodemon. Entonces, probablemente ahí es donde comienza. Solo intenta, como, tienes que cambiarlo aquí en package.json. Quieres cambiar el inicio de la región. Solo cambia esto a, no sé, 5005 o lo que sea. Tienes que cambiarlo ahí. Y luego tienes que cambiarlo en los scripts de construcción. Sí, aquí en la URL del worker de la región donde defines esta pieza. Entonces, solo cambia eso a lo que cambies el otro puerto. Solo voy a darle otro minuto o dos para que algunas otras personas terminen. Porque sé que es un gran paso. Sí. Entonces, si intentas npm run deploy, esto está usando el subdominio de los workers de Cloudflare. Constante. Entonces, si inicias sesión en el panel de control de Cloudflare. Solo ve a esta URL. Deberías poder ver tu subdominio en la barra lateral. Si eres un cuenta completamente nueva, es posible que necesites desplegar un worker primero. Haz clic en sí, sí, sí, sí. Acepta. Una vez que tengas ese subdominio, lo introduces aquí. Solo reemplaza mi nombre con el tuyo, básicamente. Y luego, con suerte, eso lo está recogiendo. Pero si no, avísame. No dados. Bueno. Tal vez aguanta un momento. Podemos intentar desplegar como seis. Ejercicio seis. Y es una pizarra limpia. Porque eso es básicamente como cinco completados. Entonces, podrías tener suerte allí. Pero si podemos echar un vistazo más de cerca más tarde. ¿Eso creó un segundo worker? Dejó de funcionar después de eso. Error de Windows. Sabía que iba a pasar en algún momento. Lo siento. Interesante acerca de los puertos. Sí, avísame qué es y si puedo ayudarte a solucionarlo. Bueno. Creo que voy a empezar a pasar por el resto de esto yo mismo. Entonces, llegamos hasta la ejecución del worker RSC. Veamos dónde está esto en este archivo. Sí. Entonces, básicamente llegamos hasta aquí. Teníamos el Wrangler region toml. Teníamos nuestros nuevos scripts. Y teníamos nuestro constructor y el propio worker RSC.
14. Actualizando el Worker Global para Obtener el Worker RSC
Short description:
Dado que nuestro worker RSC ahora está produciendo un DOM serializado, necesitamos cambiar nuestro worker global para obtener el worker RSC y renderizar el DOM serializado en lugar de importar la aplicación directamente. Utilizamos ES build para inyectar dinámicamente el worker RSC. Obtenemos el worker de la región y usamos create from fetch para convertir el DOM serializado en HTML. El worker global no necesita preocuparse por use server y use client y obtiene toda su información de RSC.
Así que, continuamos. ¿Dónde estoy? Aquí. Así que, porque nuestro worker RSC ahora está produciendo este DOM serializado, necesitamos cambiar nuestro worker global, la cosa que está haciendo el SSR, para consultar ese DOM. Y renderizar eso en lugar de simplemente importar la aplicación directamente. Entonces, si echamos un vistazo a lo que el worker global estaba haciendo antes, simplemente estábamos importando la aplicación y renderizando eso. Así que, no queremos estar haciendo esto. En cambio, queremos obtener el worker RSC. Así que, inyectamos esto dinámicamente con ES build. Viste eso en el script de construcción. Más abajo aquí, introducimos esta variable, esta característica muy útil de ES build que te permite simplemente inyectar cosas así. Entonces, deberíamos estar leyendo desde el subdominio del worker de Cloudflare que configuraste. Pero tal vez haya un problema con eso. Lo revisaremos en un minuto. Y luego seguimos usando render to readable stream. Pero ahora estamos introduciendo create from fetch. Y si simplemente pasamos por encima de estos pequeños bits por un segundo, lo que hacemos es obtener nuestro worker de la región. Y decimos, hey, simplemente estamos reenviando esta solicitud. Y para la promesa que obtenemos de eso, llamamos a create from fetch. Esto es un interno de React. Y estamos diciendo, hey, vas a obtener este DOM serializado. Necesitas poder convertir eso en HTML. Y eso es lo que esto está haciendo. Los bits de aquí arriba, estos encabezados y cosas, esto es solo una especie de proxy a RSC desde el worker global. Entonces, no necesitamos prestar demasiada atención a eso. Y luego todo lo que hacemos es construir esto. Y afortunadamente, esto es un poco más fácil de construir que el worker de la región porque no necesita preocuparse por el use server y use client. Está obteniendo toda su información de RSC. Entonces, solo agregamos esto una cosa que creo que es básicamente todo lo que necesitamos cambiar. Entonces, sí.
15. Entendiendo el Worker Global y RSC
Short description:
SPEAKER 1 pide a Greg que explique cómo el worker global obtiene su información de RSC. SPEAKER 2 configura los dos servicios diferentes y explica el proceso. El worker de la región devuelve un DOM serializado, mientras que el worker global hace una solicitud al worker de la región y convierte el DOM serializado en HTML. El worker RSC maneja los componentes del servidor, mientras que el worker global maneja toda la aplicación y la combina con la aplicación fuente. El worker RSC solo tiene una referencia al componente contador, mientras que el worker global tiene toda la información necesaria para construir la aplicación.
SPEAKER 1 Lo siento, Greg, cuando dices que obtiene toda su información de RSC, ¿podrías explicar un poco más? ¿A qué te refieres?
SPEAKER 2 Sí. Permíteme poner esto en marcha rápidamente. Y luego podemos echar un vistazo a los dos servicios diferentes que se están ejecutando y lo que están obteniendo el uno del otro. Así que, voy a tomar todo esto y ponerlo en el worker global. Y luego voy a tomar nuestro comando de construcción actualizado. Lo pongo aquí. Y luego tengo un error. ¿Qué es eso? Oh, sí. Importar. Ahí vamos. Y luego actualizamos. Sí, eso es suficiente para responder a tu pregunta. Así que, si ejecutamos nuestra construcción de nuevo en mi ejercicio, lo tengo aquí, voy a ejecutarlos por separado sólo para que podamos ver más claramente lo que está pasando. Así que, ejecuto mi región. Y luego en otro vamos a entrar en ejercicios, cinco. Y vamos a ejecutar global. Así que, ahora tenemos dos procesos. Tenemos nuestro worker de la región funcionando, y tenemos nuestro worker global funcionando. Si vamos a nuestro worker de la región y lo abrimos, obtenemos este DOM serializado. Y así, ya hemos visto esto. Esto tiene, como estaba hablando antes, todas estas referencias a lo largo de él, diciendo, hey, estamos usando suspense aquí, necesitamos llenarlo con este valor. Aquí están nuestros to dos cuando estén listos. Todo esto y otras cosas. Y luego, con los dedos cruzados, voy a mi puerto 8005, deberíamos ver el servidor lado renderizado React. Esto va a ser un poco raro porque aún no he hecho la pieza del cliente del navegador. No sé si eso va a funcionar. Sí. Roto. Pero el HTML que ves está siendo entregado correctamente. ¿Qué cargamos aquí? Sí, sólo el documento. Así que, echemos un vistazo más de cerca al código. Así que, lo que estamos haciendo aquí es, estamos haciendo una solicitud para slash. Este es el código que se está ejecutando. Estamos sólo permitiendo algunos encabezados. Olvidémonos de eso por el momento. Vemos que desde nuestro worker global, desde nuestro worker SSR, hacemos una solicitud a nuestro worker de la región, nuestro worker RC. Estamos reenviando la solicitud que obtenemos. Y luego decimos, hey, si estamos buscando algo de HTML, llamamos a esta cosa de create from fetch. Esta fetch, como, data response promise será ese DOM serializado. Y así, create from fetch lo convierte en HTML. Si fuera a registrar esto, estaría obteniendo cosas de HTML aquí. Lo siento, eso es una pequeña mentira. Vete. Y estaría obteniendo una aplicación React aquí. Como un elemento React. Y luego lo convertimos en HTML justo aquí. Justo debajo. Así que, todavía está usando el render to readable stream que estábamos haciendo antes. Pero si fuera a registrar esta pieza, estaría obteniendo HTML. Y, de hecho, eso es lo que el navegador está viendo. Eso es esto. Eso es justo, como, lo que obtenemos de vuelta. ¿Dirías que es como cómo muchas aplicaciones renderizan en el servidor la carcasa de la aplicación. ¿Dirías que es lo mismo, eso es lo que, como, ¿usarías el mismo modelo mental para esta pieza de RSC? Porque ¿está cargando todas las cosas estáticas? ¿O todavía está cargando una mezcla de componentes del servidor y los componentes del cliente? Está haciendo toda la aplicación. Así que, lo que hace. Son principalmente los componentes del servidor en este momento. Sí. Y cuando se trata de un componente del cliente, veamos si podemos encontrar eso. Veamos. Okay. Así que, la pieza RSC, verás que sólo tiene esta referencia al contador. Así que, vamos a encontrar dónde está eso. Aquí está. Así que, L1. Todo lo que dice es, como, a y en ningún otro lugar aquí está el código de incremento o algo así, como, eso no existe. Así que, el worker RSC es totalmente las piezas del servidor. Pero el worker global, si volvemos y miramos el código, le estamos dando suficiente información y suficiente en la construcción porque decimos, hey, queremos construir, como, el worker global más todas las, como, la aplicación fuente también. Y, hey, está disponible ¿dónde lo ponemos? Decimos, hey, está disponible en este directorio.
16. Entendiendo las Responsabilidades del Worker
Short description:
Aquí está nuestro worker. Conoce los componentes del servidor y puede interactuar con APIs de terceros y bases de datos. Realiza el renderizado completo del lado del servidor de la aplicación. La respuesta HTML incluye el código de los componentos del cliente y del servidor. El navegador será responsable de hidratar solo los componentes del cliente.
Miramos el código, como, la cosa construida. Aquí está nuestro worker. Aquí está nuestro, oh, Dios mío, eso es un lío. Veamos si es reconocible en la parte inferior. Sí, aquí está nuestro worker. Estamos diciendo, hey, haz tu create front fetch. Y, por cierto, aquí es donde existen todos los componentes. Estos son nuestros componentos, incluyendo nuestras cosas del cliente. Entonces, si vuelvo a mi dibujo, dondequiera que estuviera, aquí. Esta cosa solo sabe sobre los componentes del servidor. Por lo tanto, es capaz de interactuar con, como, APIs de terceros, bases de datos y todo este tipo de cosas. Esta cosa sabe sobre toda nuestra aplicación. De esa manera es capaz de hacer el completo renderizado del lado del servidor de todo. Lo que obtienes de vuelta es, ¿dónde está funcionando esta cosa? Aquí. Miramos el HTML, obtenemos de vuelta nuestro código de componentes del cliente. Acaba de ser SSR'd. Entonces, como, sí existe. Y también obtenemos de vuelta nuestro código de componentes del servidor, como, una vez que se ha convertido en HTML. Entonces, sí, puedes pensar en ello como, como, simplemente, como, dos responsabilidades diferentes. Esta cosa es responsable de las piezas del servidor. Esta cosa es responsable de unir todo. Y luego no lo he hecho todavía, pero creo que algunas personas ya lo han hecho. El navegador será entonces responsable de hidratar solo los componentes del cliente. Porque esto es ahora todo el HTML que necesita. Solo necesita hacer las piezas que son interactivas, interactivas cargando esos componentes del cliente.
17. Construyendo la Aplicación del Lado del Cliente
Short description:
Hemos cambiado la forma en que estamos construyendo nuestra aplicación del lado del cliente. No agrupamos toda la aplicación en una sola cosa grande, solo los componentes del cliente. También solo incluimos los módulos de nodo React necesarios. Ajustamos el proceso de hidratación para hidratar solo las piezas del componente del cliente. Esta es una ventaja de los componentos del servidor React, ya que no es necesario cargar toda la aplicación en el cliente. Solo cargamos las piezas con las que se está interactuando. Al hacer esto, obtenemos los beneficios de los componentes del servidor y del cliente trabajando juntos. Se pueden lograr ganancias de rendimiento al eliminar el código no utilizado. Los componentos del servidor React permiten que los cálculos se realicen en el servidor y solo entregan la pieza necesaria.
SAUER MOYIN BASIN Sí. Tiene sentido. Vale, genial. Gracias por pasar por eso. Sí.
ADDY OSMANI No hay problema. Entonces, sí. Déjame simplemente ponerme al día aquí y hacer eso. Entonces, voy a coger estos dos y meterlos en mi script de construcción. Y entonces, hemos cambiado ligeramente la forma en que estamos construyendo nuestra aplicación del lado del cliente. Esto es solo para decir, como, hey, no agrupes toda la aplicación en una sola cosa grande. Porque todo lo que nos importa son los componentes del cliente. Entonces, no queremos agrupar todo. Vamos a mantenerlos separados por ahora. Y también vamos a volcar en nuestros React nodo modules, solo ese pequeño fork del que estaba hablando antes, solo porque tenemos las piezas que necesitamos. Y creo que eso es todo. Oh, no. Una cosa más. Entonces, necesitamos, sí, ajustar un poco cómo estamos hidratando básicamente. Porque no queremos que toda la aplicación se hidrate ahora, solo queremos hidratar solo las piezas del componente del cliente. Y este es uno de los grandes beneficios de los React server components. No necesitas cargar toda tu aplicación en el cliente, solo las piezas con las que están interactuando con. Entonces, es una gran mejora. Donde antes estábamos enviando, como, toneladas de, como, bibliotecas, o renderizando markdown o algo así. Cuando realmente tienes una publicación de blog estática, solo deberías estar enviando HTML. ¿Dónde fue esto? Esto va a la aplicación. Entonces, este índice de origen es un poco más complicado. Ves que estamos usando más de esto cosas que nos ayudan a hacer el pegamento. Y entonces, está diciendo, hey, solo busca las piezas del componente del cliente en las que estamos interesados, básicamente. Entonces, ahora si lo ejecuto, espero que esto funcione para mí. Npm run dev. Esto debería construir. Arranca mis dos procesos. Entonces, todavía podemos ir a 9,006, 5. Espera. 5. Sí, todavía obtenemos esto. Todavía podemos ir a 8,005. Pero ahora, ves todo de React ha cargado. Y si lo buscamos, cargamos explícitamente counter JS. Eso es lo único código fuente real que cargamos en el cliente. Y eso hace que esto funcione. Entonces, podemos ir y obtenemos todos los beneficios de los componentes del servidor haciendo la carga diaria y obtenemos los beneficios de los componentes del cliente y su interactividad. Días felices. ¿Todo eso tiene sentido para todos? Tomo el silencio como un sí. Me gusta mucho esto. Me pregunto si tuviéramos, como, un montón de piezas interactivas en la página web. ¿Pierdes el beneficio de cargar mucho de eso? Y parece que es similar a una aplicación de cliente. Pero es realmente útil cuando hay principalmente pequeñas piezas interactivas. Sí. Entonces, creo que hay un par de cosas allí. Y no sé si quieres saltar y hablar de eso. Pero creo que hay un par de cosas allí. Uno, la forma en que estamos haciendo la hidratación del cliente en este momento es realmente ingenua. Nunca cargarías solo este archivo. Lo harías, como, agrupar al menos todos los componentes del cliente que están en la página. Solo para que puedas, como, sacudirlo y, como, cachearlo y cosas así. Y también, en realidad, como, creo que todavía estamos construyendo todo. Si voy a la fuente, como, to do's.js. Sí. Todavía estamos construyendo los componentes del servidor. Solo que no está siendo utilizado. Entonces, todavía querrías agrupar correctamente el cliente. Solo estamos tomando un poco de atajo aquí. Entonces, verías performance ganancias allí donde eres capaz de sacudir cosas que no estás usando. Pero también, se trata de afeitar piezas que definitivamente no necesitas. Entonces, como, ese ejemplo de, como, dije, si tienes alguna publicación de blog y la has escrito en Markdown en una tradicional create react app, estás enviando tanto el contenido de Markdown de tu blog y luego también alguna biblioteca de npm para convertir eso en HTML. Y eso, como, podría ser potencialmente bastante grande si tienes, como, no sé, resaltado de código y necesita saber todos tus idiomas y cosas así. Mientras que, realmente, lo que debería ser y lo que React server components permite es que todos esos cálculos ocurran
18. Medición del Tamaño del Paquete y Optimización del Trabajador
Short description:
En esta sección, discutimos la medición del tamaño del paquete del lado del cliente y de los trabajadores. También destacamos la importancia de minimizar el tamaño de los trabajadores para un rendimiento óptimo. Además, mencionamos las limitaciones en el tamaño de la aplicación que se puede desplegar en proveedores sin servidor como Cloudflare. Finalmente, abordamos una pregunta sobre el código en el archivo index.js y explicamos el propósito de las secciones de scripts del navegador en la configuración.
en el servidor para convertirlo en HTML. Solo entregas esa pieza. Significa que puedes olvidarte de la biblioteca pero tu botón de me gusta en tu publicación de blog sigue funcionando. Entonces, se trata simplemente de dejar atrás lo que no necesitas, básicamente. ¿Cómo mides el tamaño del paquete de una aplicación con la configuración? Esa es una buena pregunta. Entonces, hay un par de cosas ahora. ¿Verdad? Así que, tenemos el lado del cliente, y, como digo, la configuración que tenemos en esta masterclass es súper básica. Todo sigue siendo, como, individual. No están agrupados en absoluto. Entonces, ¿cómo mides el paquete del lado del cliente? No fácilmente en este momento. Supongo que simplemente sumarías todos los scripts que importas en el cliente. Estoy seguro de que hay, como, herramientas de Chrome que te ayudarían con eso. Pero definitivamente querrías hacer esto correctamente. Si lo estás haciendo de verdad en producción. Las otras cosas en las que pensar también son el tamaño de los trabajadores que estás produciendo. Entonces, si quieres que estos sean súper eficientes y, como, distribuidos globalmente y todo este tipo de quieres minimizar, como, ellos también. Así que es bastante agradable que el trabajador regional, la cosa RSC solo se centra en los componentes del servidor y el trabajador global solo se centra en bueno, de hecho, probablemente es la pieza más pesada. Porque hace tanto la conversión del cliente componentes en HTML pero también tiene que entender, como, lo que está recibiendo de RSC. Entonces, este es probablemente el más grande. RSC es probablemente el medio y luego el cliente es probablemente el más pequeño, lo cual es agradable para todos tus usuarios. Solo significa que necesitas pensar en estos. Si tienes una aplicación masiva y estás tratando de desplegarla en un proveedor serverless como Cloudflare podrías alcanzar límites en cuán grande puede ser una aplicación que puedes desplegar. Creo que el nuestro para los trabajadores es quizás 10 megabytes en este momento. Entonces, si estás obteniendo algo más grande que eso, empezarías a tener problemas. Pero, sí, felicidades. Todos han pasado por la parte más difícil. Espero que eso haya sido emocionante pieza porque ciertamente lo fue para mí. Podías oírlo en mi voz, me encanta esto. Creo que es una pieza de tecnología bastante genial. Los componentes del servidor, son realmente algo. Todavía veo la llamada al JSON. Me pregunto cómo es que todavía tengo el índice en mi index.js, todavía tengo el código para el todo. Ah, vale, sí, echemos un vistazo. Veo que en el código de este global estamos efectivamente empaquetando todo el JS. Sé exactamente a qué te refieres. Veamos si puedo sacarlo. Sí, no deberías. Entonces, el index.js que teníamos antes, volvamos al ejercicio anterior. Si echamos un vistazo, si solo miro mis cosas construidas, aquí creo que está. Este es nuestro aplicación React completa. Tiene todo en él, incluyendo, como dices, el await fetch. Pero si miro el actual, voy a index.js, todo lo que tenemos aquí es el código para decir, hey, ve y consígueme estos componentes. Entonces, si miramos la aplicación, como lo que hace, carga index.js, que es ese archivo que acabamos de ver. Entonces, ¿qué es todo esto? Va a ser difícil averiguar qué es, qué, creo que esto es solo oh, sí, vale. Entonces, está cargando como bibliotecas React. Bibliotecas React, y luego es como localhost de nuevo. Entonces, esto está haciendo una solicitud con el texto X componente. Este es el encabezado diciendo, como, hey, ve y consígueme este DOM. No, el problema estaba de mi lado, sí, lo siento. Vale, genial. Entonces, sí, todo lo que tiene es el componente del cliente. Sí, olvidé reiniciar el servidor npm, así que todavía estaba entregando el código anterior, supongo. Genial. Como digo, la implementación que tenemos en este momento no es, como, segura. Todavía podría ir a, como, todos.js y verlo. No hemos hecho nada acerca de, como, proteger nuestro código del lado del servidor. Solo, como, no estoy ejecutando esto en el configuración actual, lo cual es agradable. Entonces, solo está demostrando que no necesitas enviar este código, porque no es necesario. Y hay un montón de cosas con las que todavía están jugando en el núcleo de React, como las nuevas APIs de taint y cosas así, que son, como, formas de marcar ciertos símbolos en tu código como, como, absolutamente no puedes entregar esto al cliente o al servidor, y hacer explotar la construcción si eso iba a suceder. Entonces, eso todavía está muy en progreso. Entonces, el trabajo todavía está como sintiéndolo. ¿Puedes explicar las secciones de scripts del navegador? Sí. Entonces, esto es otra cosa que simplemente escondí, porque no pensé que merecía, como, destacar. Pero echemos un vistazo. Sí. Navegador React. Entonces, aquí tenemos este tipo de truco. Y esto solo está diciendo, hey, como, carga, como, React experimental para mí desde este CDN. Y también, hey, necesitas este otro archivo, también. Esto es porque hemos alterado fundamentalmente cómo se hidrata el cliente. Entonces, antes decíamos, hey, vamos a producir un servidor paquete, va a tener todo en él, y también vamos a producir un paquete de cliente que va a tener todo en él, y luego el servidor va a producir algo de HTML, y luego una vez que eso está en el cliente, va a hidratar, va a redibujar toda la página, y el cliente va
19. Entrega de HTML y Configuración de la Base de Datos
Short description:
Todavía entregas todo el HTML, pero solo los componentes del cliente se reemplazan. Ya no producimos un solo paquete. En su lugar, producimos cada componente individualmente y los cargamos manualmente. Esto permite una carga por partes. En la siguiente sección, reemplazaremos nuestra API de tareas pendientes con nuestra propia base de datos y exploraremos cómo pasar primitivas de plataforma a nuestra aplicación React. También discutiremos la colocación inteligente y su relevancia para esta configuración. Pasemos a la sexta sección, que se centra en la configuración de la base de datos. Siéntete libre de empezar a trabajar en ella.
para hacerse cargo. Lo que estamos haciendo aquí en cambio es mucho más pieza por pieza. Entonces, todavía entregas el HTML completo, pero las únicas partes que se reemplazan son los componentes del cliente. Entonces, no estamos produciendo el mismo gran paquete. Entonces, no podemos usar ES build de una manera tan fácil, por eso nuestro index JS ha cambiado para hacer esta carga por partes. Y nuestro script de construcción, ya no estamos produciendo un solo paquete. Déjame sacar el otro para comparar y contrastar. Sí. Anteriormente estábamos agrupando todo, y decíamos que tu único punto de entrada es la aplicación completa, pero ahora estamos diciendo, hey, solo produce cada componente individualmente, y vamos a cargarlos manualmente, y eso es realmente lo que los scripts del navegador y el nuevo index JS están haciendo. ¿Tiene sentido? De nuevo, voy a asumir que el silencio significa sí. Así que, si quieres que te explique algo más. Vale. Genial. Eso es wow, otra hora ya se ha ido. ¿Queremos tomar quizás un descanso de cinco minutos? Porque estamos llegando al final aquí. Las dos últimas secciones van mucho más rápido. Entonces, digamos, nos encontramos aquí a las 25 pasadas de nuevo, ve y agarra un snack o algo. Estamos empezando a llegar a la conclusión aquí. Lo que vamos a hacer es reemplazar nuestra tarea API con nuestra propia base de datos, solo para que podamos ver cómo funciona y cómo podemos pasar, como, primitivas de plataforma a nuestra aplicación React y usar eso en nuestros componentes del servidor. Y luego voy a hablar un poco sobre la colocación inteligente y te mostraré cómo eso tiene sentido con esta configuración. Y luego hemos terminado. Entonces, la sexta sección, vamos aquí. Esto es solo acerca de configurar esta base de datos. Solo algunas cosas a tener en cuenta cuando estés pasando por esto. Solo para asegurarte de que estás reemplazando algunos IDs y cosas así. Estoy eligiendo una ubicación que está lejos de mí. Te sugiero que hagas lo mismo. Pero no es gran cosa. Y luego esperamos pasar por esto y la siguiente parte. Pero sé que estamos empezando a llegar al tiempo. Entonces, veremos. Podríamos quedarnos un poco cortos. Pero sí. Siéntete libre de empezar en la sexta sección. Entonces, ya tengo una base de datos. Lo hice obviamente de antemano. No tengo idea si esos son mis números. Solo voy a robar de aquí. Ahí vamos. Entonces, todo lo que esto está haciendo es simplemente decir, hey, para esa base de datos que acabamos de crear, queremos vincular esa base de datos a nuestro trabajador regional o trabajador RSC y hacerla disponible. Y la vamos a hacer disponible en DB. Entonces, va a estar disponible en env.db. Estamos diciendo, hey, usa esta base de datos y aquí hay una carpeta de migraciones que quiero que ejecutes. Entonces, agarramos esto. Solo voy a adelantarme de nuevo. Migraciones. Y pego eso. Entonces, solo tenemos un SQL bastante estándar para crear nuestra tabla. Nos estamos moviendo lejos de las tareas pendientes, estamos entrando en notas ahora, solo para que no tengamos una colisión con nuestro componentes o lo que sea. Entonces, exactamente la misma idea. Entonces, podemos ejecutar estas migraciones. Voy a ejecutar saliendo de aquí a donde teníamos seis. Y ejecutar esto localmente. Supongo. Ejecutar esto remotamente. Ya tienes a alguien. Sí. Genial. Y luego podemos insertar algunos datos ficticios aquí. Genial. Voy a hacer eso remotamente también. Genial. Y recuerdas que dije que tenemos la base de datos disponible para nosotros en DB. Lo que vamos a hacer es dejar que TypeScript lo sepa. Vamos a crear un types.ts. Y lo pongo ahí. Y luego vamos a usar eso para crear una tabla. Lo pongo ahí. Y luego vamos a usar eso en un nuevo componente, un nuevo componente del servidor. Que va a interactuar con nuestra base de datos. Entonces, vamos a llamar a esto
20. Uso del Entorno y la Base de Datos
Short description:
Podemos pasar el entorno al componente del servidor, lo que nos permite interactuar con la base de datos. Podemos usar un contexto de React o almacenamiento local asíncrono para pasar objetos a los manejadores de ejecución infantil. En el trabajador regional, vinculamos el trabajador a la base de datos y pasamos el entorno a la función de renderizado. El trabajador SSR no tiene conocimiento de la base de datos, y todo el manejo de la base de datos lo realiza el trabajador RSC. Esta configuración nos permite utilizar datos del servidor que son inaccesibles para el cliente. Las acciones del servidor, que no se cubrieron en esta sección, también se pueden implementar fácilmente pasando la información necesaria del trabajador global al trabajador regional. Esto nos permite actualizar la base de datos en función de las acciones del usuario. Si tienes alguna pregunta, no dudes en preguntar. Por último, si estás interesado en D1, nuestra base de datos sin servidor, felicidades por crear la primera. Es una base de datos SQLite ligera que es genial para proyectos pequeños.
notes.tsx. Colócalo aquí. Como digo, componente del servidor. Va a usar nuestro tipo de entorno. Como digo, está disponible en env.db. Vamos a preparar una declaración, que va a ser consultando nuestra database. Esta es solo la API para D1. Si estás usando Prisma o Drizzle, será diferente. Pero la idea es que estamos haciendo algunas primitivas muy del lado del servidor disponibles dentro de nuestra aplicación React. Vamos a tomar estos data, al igual que lo hemos hecho en una búsqueda, excepto que estamos interactuando con nuestra database en su lugar. Conviértelo en algo de JSX para nosotros. Y luego solo necesitamos asegurarnos de que hemos conectado nuestro entorno todo el camino hasta abajo al componente del servidor que lo necesita. Así que, otra opción aquí sería usar ya sea un contexto de React. Podrías decir en la parte superior de tu componente del servidor, la carcasa de tu aplicación, en app.tsx, puedes crear un contexto de React y decir, hey, este es mi contexto de plataforma. Tiene todas mis cosas de plataforma en él, y luego cualquier hijo de nuestra aplicación podría simplemente usar ese contexto cuando quiera. O podrías usar algo un poco más de plataforma, que es el almacenamiento local asíncrono. Como empecé un poco de un read me sobre esto aquí en este archivo. Así que, siéntete libre de echar un vistazo, pero no lo terminé del todo. Si quieres más información sobre esto, hay mejores notas de las personas reales de la especificación en la parte inferior de este read me en el repositorio principal. Esto es básicamente solo un contexto de React. Es una forma de pasar objetos a los manejadores de ejecución infantil. Así que, puedes simplemente, establecer esto justo en la parte superior de tu manejador, y luego acceder a él en los hijos. Estamos yendo por la solución simple en este momento. Así que, solo vamos a conectarlo todo el camino a través. Así que, vamos a aceptar en nuestro parámetro env aquí para toda la aplicación, y luego lo vamos a pasar a las notas de abajo. Así que, vamos a tomar todo esto. Y luego solo necesitamos hacerlo en un lugar más, que es nuestro trabajador regional. Y el trabajador regional es la cosa que recuerdas que tenemos nuestro Wrangler regional. Esto está diciendo, hey, Cloudflare, por favor vincula mi trabajador a esta database. Es el trabajador el que lo recibe. Y entra justo después de la solicitud. Así que, esto, como dije, era como algo de la plataforma. Así que, estamos diciendo exportar, por defecto, fetch. Queremos manejar las solicitudes HTTP. Aquí está la solicitud que recibes, y aquí está el entorno que has configurado para este trabajador. Así que, tiene la database en él, y simplemente se lo damos a nuestra función de renderizado. Así que, decimos, hey, cuando renderices la aplicación, dale env. Y creo que eso es todo. Sí, eso es todo. Así que, ahora si hacemos npm run dev, esto debería iniciar una versión local de mi database, y debería, debería funcionar de forma remota también cuando lleguemos allí. Pero sí, seguro, aquí está toda mi aplicación. Podemos de hecho, debería haber empezado quizás con la versión más aburrida de RSC. Pero aquí está lo que el trabajador regional está devolviendo al trabajador SSR. Así que, el trabajador SSR no tiene conocimiento sobre la database. Todo lo que ve es esto, hey, por favor renderízame como un H3 con esta información en él. Todo el manejo de la database lo está haciendo el trabajador RSC. Y luego todo se junta cuando renderizas la aplicación del lado del servidor y luego la hidratas del lado del cliente. Así que, todavía puedes hacer clic en todos tus botones y puedes usar los data del servidor que son muy fundamentalmente, como totalmente inalcanzables en el cliente. Así que, antes estábamos viendo, como, hey, el cliente todavía está haciendo solicitudes para hacer lo que sea, esto sería completamente imposible ahora porque no hay simplemente ninguna forma para que este cliente interactúe con esa database. No está expuesta en Internet o algo así. Así que, esta es realmente la prueba más lejana, como, data cargando. La otra cosa que puedes hacer, por supuesto, son las acciones del servidor. Y eso es lo que originalmente esta sección iba a ser. Lo siento si estabas esperando eso específicamente. Pero tuve que cortarlo en el interés del tiempo. Pero es realmente notablemente fácil, en realidad, conseguir que las acciones del servidor funcionen. Ya hemos sentado las bases para ello un poco en ¿dónde estaba? Trabajador global, creo. Sí. Así que, ya estamos buscando este encabezado que React envía cuando envías una mutación. Y así, todo lo que necesitas hacer es básicamente solo conectar esto a través del trabajador regional. Te mostraré un ejemplo de dónde está esto si quieres llevar esto más allá y verlo todo el camino a través de ti mismo. Pero sí. Eso obviamente probaría el otro lado. Así que, tienes data cargando con lo que tenemos ahora con esta database y cosas así. Pero también podrías crear un formulario en tu aplicación, enviarlo, y luego React puede manejarlo todo el camino hasta la actualización de la database también. ¿Alguna pregunta sobre esta sección? Creo que... sí, lo único que tengo que decir realmente es si estás interesado en D1, esta es nuestra database serverless. Hiciste la primera. Así que, felicidades. Pero es una base de datos SQLite bastante ligera. Muy divertido para jugar con ella.
21. Colocación Inteligente y Próximos Pasos
Short description:
La colocación inteligente es una forma diferente de ejecutar trabajadores, permitiéndoles funcionar cerca del origen para un mejor rendimiento. Mueve la pieza de cálculo a la región donde tiene sentido, reduciendo la comunicación de ida y vuelta con la base de datos. Este modelo de arquitectura es particularmente interesante con los componentes del servidor React, ya que permite una división en la arquitectura de la aplicación. El paso final es agregar una línea al archivo Wrangler toml para el movimiento automático. Las acciones del servidor, las optimizaciones del paquete, el almacenamiento local asíncrono y los objetos duraderos son otros temas que vale la pena explorar. El accesorio flight ESM en el repositorio de React proporciona un ejemplo de acciones del servidor. Rellene el formulario de comentarios para una comunicación adicional.
para proyectos pequeños y cosas así. Sí. Genial. Sin preguntas. Seguiremos adelante. Entonces, la última sección es, afortunadamente, la más corta. Y esto es solo sobre la colocación inteligente. La colocación inteligente es una forma diferente de ejecutar tus trabajadores. Entonces, antes déjame volver a subirlo. Antes, los trabajadores estaban funcionando en cada una de estas ubicaciones y sería donde el usuario se conecta, cualquier centro de datos que esté más cerca de ellos, ahí es donde se va a ejecutar el trabajo. Pero la colocación inteligente se trata de decir, no, no quiero que se ejecute en todas partes. Quiero que se ejecute cerca de mi origen porque estoy interactuando con alguna API de terceros o lo que sea y solo están funcionando en una región o tienen una database en algún lugar. Y entonces, en nuestro caso, nuestro trabajador regional ahora está hablando con una database. Y esta database no está replicada en lectura en ninguna parte. Solo tiene un único primario. Y entonces, si tuviéramos que acceder a ella desde todo el mundo, digamos que queríamos hacer nuestra renderización del lado del servidor aquí y nuestro RRC, si tuviéramos una conexión ruidosa con nuestra database, como la mía está en Europa Occidental, tendría que ir de ida y vuelta y de ida y vuelta para renderizar mi página. Y esto obviamente no es ideal. Podría llevar a una aplicación mucho más lenta de lo que necesita ser. Entonces, la colocación inteligente básicamente dice, oye, cuando identificas que estás teniendo una conversación ruidosa, simplemente mueve esta pieza de cálculo a donde tenga sentido que vaya. Y entonces, va a decir, oye, estás teniendo muchas conversaciones en Europa. Simplemente vamos a mover esta pieza aquí. Y ahora cuando un visitante de América viene, solicita la página, se va al trabajador RSC este puede tener una conversación ruidosa con la database muy rápidamente porque está cerca. Y luego, finalmente, ese DOM serializado simplemente vuelve a SSR y esto termina renderizando la página. Entonces, es solo un modelo de architecture diferente. Y espero que veas por qué creo que es tan interesante con los React server components cuando naturalmente tienes esta división en la architecture de tu aplicación. Tiene sentido, creo, ejecutar una parte de eso cerca de tu backend y luego la otra parte en todas partes. Entonces, obviamente, este está funcionando solo aquí en América porque estoy aquí. Pero si estuviera aquí, también estaría funcionando aquí. O si estuviera aquí. Entonces, como, está funcionando en todas partes. Pero esta pieza está funcionando solo junto a tu database. ¿Eso tiene sentido? El silencio es oro. Genial. Excelente. Entonces, el paso final, creo, es literalmente una línea. Agregas esta pieza a tu Wrangler toml y eso es todo. Se mueve automáticamente para ti. Puede llevar un segundo para que realmente se mueva. Lo hacemos a partir de patrones de tráfico y cosas así. Entonces, es posible que no lo veas de inmediato. Hay más información sobre la colocación inteligente aquí. En nuestros documentos. Entonces, puedes, como, obtener más información sobre dónde está funcionando. Puedes consultar y decir ¿te has movido ya? Y algo de información sobre las analíticas en cuanto a por qué tomamos esa decisión. Pero, sí, creo, Dios mío, creo que eso es todo. Déjame pensar si hay algo más. Como digo, las acciones del servidor probablemente serían lo próximo a lo que iría. Entonces, volvamos a este readme. Dejé en la parte inferior aquí algunos temas que creo que si disfrutaste esto, también te interesarían. Las acciones del servidor están en la cima de la lista. A continuación, solo están, como, optimizaciones en torno a cómo estás produciendo estos paquetes para estos diferentes lugares. Entonces, Ryan y yo simplemente estábamos agrupando todo con ESBuild, pero puedes dividirlos y solo cargar los componentes que son relevantes para las solicitudes que están entrando. Si estás solicitando la página de inicio, solo cargas los componentes que están en la página de inicio. Ese tipo de cosas. Mencioné el almacenamiento local asíncrono. Esto acaba de ser adoptado recientemente en el invierno CG, que es el grupo de trabajo para muchos de estos tiempos de ejecución en el borde como trabajadores. Es una API bastante genial que está disponible en muchos lugares ahora. Si te gustó D1, te pueden gustar los objetos duraderos. Es solo otra primitiva de data que tenemos. Y luego, gran parte de esta masterclass fue robada directamente del repositorio de React. Tienen este excelente accesorio aquí llamado flight ESM. Flight es como ellos llaman a los componentes de React internamente. Si echas un vistazo a esto, tiene el ejemplo de acciones del servidor. Te recomiendo que lo revises. Obviamente no es Cloud Flurry. Está muy integrado en los navegadores y es la forma bendecida de React, si quieres echar un vistazo. No se supone que se use en producción. Tampoco el mío. Pero es solo la exploración en estas nuevas API y cosas así. Lo último que te dejaré es mi, ¿dónde se ha ido?
22. Comentarios Finales y Métricas de Colocación Inteligente
Short description:
Esta es mi primera masterclass y me encantaría hacer más y mejorar en ellas. Agradecería cualquier tiempo que dediques a completar eso. Todas las preguntas son opcionales. Incluso si es la primera, déjala. Por favor, envíalo. Las métricas de colocación inteligente consideran el número de solicitudes salientes para una solicitud entrante. Si tienes solo una conversación con una base de datos, no vale la pena moverse. Pero si tienes dos o más, probablemente valga la pena moverse. Muestreamos el 1% de las solicitudes a nivel mundial y elegimos la que tiene la menor latencia. Gracias a todos por venir y por favor rellenen el formulario de comentarios en Bit.ly RSC masterclass.
Ah, está aquí. Tengo un formulario de comentarios. Por favor, complétalo. Esta es mi primera masterclass y me encantaría hacer más y mejorar en ellas. Agradecería cualquier tiempo que dediques a completar eso. Todas las preguntas son opcionales. Incluso si es la primera, déjala. Por favor, envíalo.
Creo que eso es todo. Tenemos una última pregunta. ¿Cuáles son las métricas para contar para la colocación inteligente? Entonces, la forma en que funciona es que miramos, oye, tienes alguna solicitud entrante y luego, ¿cuántas solicitudes salientes tienes para esa solicitud? Entonces, si tienes solo una conversación con una database, entonces no vale la pena moverse, porque eso podría estar sucediendo en cualquier lugar del mundo. Pero si tienes dos o más, entonces nos damos cuenta de que probablemente vale la pena moverse. Y la forma en que lo hacemos es que muestreamos el 1% o lo que sea en varios lugares alrededor del mundo y básicamente lo cronometramos. Y entonces, el que tiene la menor latencia gana, porque probablemente esté cerca de su backend. Y como digo, hay más, como, análisis que puedes ver sobre el número de subpeticiones que está haciendo o lo que sea, no sé qué es todo esto pero puedes ver más información sobre, sí, ahí lo tienes, el 1% están siendo redirigidos. Puedes ver exactamente por qué estamos tomando esas decisiones de moverlo. Pero, sí, espero que hayas disfrutado, te hayas divertido, hayas aprendido algo. Gracias a todos por venir. Yo ciertamente me divertí. Por favor, rellena mi cosa. Bit.ly RSC masterclass. Nos vemos a todos en algún momento en el futuro, espero.
- 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
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
Workshop
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
¡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
Workshop
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
WorkshopFree
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.
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.
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.
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.
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.
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.
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.
Comments