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

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

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

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

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

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.

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.

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.

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

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.