Componentes de Servidor React desde Cero

Soy Ben. Soy un YouTuber y también una persona a tiempo completo en Astro, que es un gran marco para construir sitios web. Sí, has leído bien. React Server Components desde cero es lo que estamos construyendo. Así que si te has estado preguntando, ¿cómo se usan los componentes de servidor fuera de Next.js, no es fácil pero lo vamos a hacer.

Así que vamos a tener un repositorio de ejemplo que puedes probar al final de la charla, y también algunos recursos de aprendizaje. Pero nuestros objetivos son construir un componente de servidor desde cero, entender cómo manejar clientes, así que vamos a hacer algo de empaquetado hoy. También vamos a averiguar cómo puedes transmitir cosas a través del cable y renderizarlas en tu navegador como un brillante componente de servidor.

Así que no perdamos tiempo. Tengo aquí un archivo de servidor vacío. Y para empezar, voy a darnos un servidor simple. Podrías usar Express o COA o lo que quieras. Voy a usar Hano, porque en mi opinión, es la forma más fácil de montar un servidor en localhost 3000. Así que sólo voy a ejecutar node-server. Te da la dirección localhost, y podemos ver Hola React Summit justo ahí. Bastante genial. Así que tenemos un servidor.

Ahora necesitamos el componente. Voy a ir a mi carpeta de App y darnos uno aquí. Lo voy a llamar page.jsx, reflejando las convenciones de nombres de Next.js, pero podrías llamarlo como quieras. Y voy a hacer un componente muy básico aquí llamado página, y vamos a tener un mensaje similar, ¡Hola React Summit, woo! Así que ahí lo tenemos. Tenemos nuestra página. Y ahora necesitamos empaquetar esto para que funcione en node. Sé que podríamos usar bun o dino o algo que tenga un renderizado elegante, pero vamos a hacerlo nosotros mismos. Vamos a decir función asíncrona construir, y dentro de aquí vamos a ejecutar ES build, que es mi bundler favorito para este tipo de cosas. Está basado en Go. Es rápido. Y también tengo un poco de configuración aquí para no estropearlo en el escenario. Tenemos bundle true. Vamos a formatearlo como un módulo ES, y vamos a tomar esa página y poner en una carpeta de construcción construida.

Y también necesito poner un pequeño import en la parte superior para ES build. Ahí lo tenemos. Y notarás que tengo algunos resolutores de archivos aquí. Los voy a sacar de esta pequeña utilidad. Es muy simple. Solo estamos tomando nuestra carpeta de aplicación y nuestra carpeta de construcción y resolviendo la ruta a ellas, porque si hay algo que puede descarrilar una demostración en vivo, son las rutas de archivos de node, así que no estamos haciendo eso a mano.

Muy bien, e importaré node URL aquí mismo, y ahora deberíamos tener todo lo que necesitamos para construir un componente de servidor. También voy a esperar la construcción cuando iniciemos nuestro servidor, para que siempre comencemos con algo fresco. Reinicia, y deberíamos ver aparecer una carpeta de construcción en el lateral aquí con nuestra página ahora compilada a algunas funciones JSX en lugar de esa sintaxis JSX. Genial, así que ahora estamos listos para realmente colocar esto en nuestro punto final. Voy a hacer una importación básica aquí, así que nuestra página va a ser await import, y vamos a ir a buscar directamente desde la carpeta de construcción, page.js, y luego tomaremos nuestro componente y lo convertiremos en un elemento con react.createElement, use page default export, y luego vamos a tal vez solo devolver esto como HTML porque los componentes del servidor son solo renderización del servidor, ¿verdad? Seguramente, así que solo voy a ejecutar render to string, componente, y voy a importar eso en la parte superior, render to string, ahí lo tenemos, y ahora si reiniciamos nuestro servidor y renderizamos eso, deberíamos obtener hello React Summit renderizado justo allí.

Muy bien, eso es todo por mi charla, gracias, componentes del servidor desde cero. Gracias. Sí. Sí.

Bueno, espera. Espera, de hecho. Así que hay un par de cosas que los componentes del servidor pueden hacer que no son solo renderizar a HTML. En primer lugar, por supuesto, los componentes del cliente. Puedes renderizar HTML, pero quieres tener cierta interactividad con él. Y también, lo que creo que es la salsa secreta de los componentes del servidor, que es el streaming.

Así que permíteme mostrarte un ejemplo simple de eso aquí mismo. Digamos que tenemos un componente de álbumes que obtiene algunos álbumes de una database, literalmente solo llamando dentro de un componente y diciendo, oh espera, y luego renderizándolo a una lista de canciones y títulos. Y si quisieras renderizar eso, sabes, el stream y esperar a que se resuelva, puedes incluso hacer react suspense, tal vez poner un fallback, decir álbumes, y esto renderizaría el H1 de inmediato y mostraría la carga hasta que se complete la llamada a la database. Un sistema realmente genial que puedes hacer con los componentes del servidor, pero que no puedes hacer con un HTML plano. Necesitamos streaming.

Así que para eso voy a recurrir a una biblioteca central en React. React server Dom. Esto es algo que proporciona el equipo de React. Tiene versiones específicas para cada bundler. Webpack está lo suficientemente cerca de lo que estamos haciendo, lo creas o no, así que vamos a tomar de allí. Y vamos a crear un stream llamando a stream react server dom.render to readable stream. Y para devolver eso desde nuestro servidor, puedes hacer una respuesta estándar de la web, porque si no lo sabes, el streaming es parte de la plataforma. Si devuelves un stream, entonces el receptor sabe qué hacer con él. Así que ahora vamos a reiniciar nuestro servidor. Y esta vez, en realidad voy a hacer curl para ver qué salida obtenemos. Así que si hago curl a nuestro endpoint, deberíamos ver algo de código bajando por el cable. Primero, vimos que el h1 entraba, hola React Summit. Luego nuestro spinner de carga con una pequeña referencia L2 aquí. Ese número dos está haciendo referencia a lo que viene más tarde por el cable, que va a ser todos nuestros álbumes. Así que sabe cómo intercambiar en caliente la carga con la lista de álbumes.

Permíteme mostrarte una vez más. Podemos ver que el encabezado aparece. Luego viene la llamada a la database. Y todas tus cosas aparecen. Pero obviamente, esto no es HTML, ¿verdad? No es como nuestro viejo ejemplo. Entonces, si lo abro en mi navegador, ¿puedes ver que es una especie de muro de texto? El navegador realmente no sabe qué hacer con esto. Eso es porque no es puro HTML. Esto es en realidad React Virtual DOM. Le está diciendo a React, quiero renderizar un h1. Y luego quiero que reemplaces este spinner de carga más tarde. Como tenemos todo ese intercambio en caliente con suspense, necesitamos React en el cliente para recibir todo lo que viene del servidor y convertirlo en Virtual DOM. De hecho, he oído llamar a esto Virtual DOM por cable. Si no lo sabías, los componentes del servidor son algo así como una cosa de pila completa. El servidor envía todas las piezas del rompecabezas, y luego el cliente las junta y las ensambla en el sitio web. Hemos terminado la parte uno, ahora necesitamos la parte dos, que es la lógica del cliente. Así que permíteme borrar esta cosa de curl aquí para que no tengamos que mirarla. Vamos a crear nuestro listener del cliente. Para eso, voy a actualizar este endpoint para que sea /RSC, solo para ponerlo en un endpoint separado. Podemos llamarlo como queramos. Y ahora voy a convertir nuestra página de inicio en un documento HTML que va a cargar ese script al que estoy aludiendo. Así que vamos a crear eso. Y devolveremos algo de HTML dentro de aquí. Voy a hacer una plantilla muy básica. Así que tenemos DocType.html, un título simple, un script para algunas clases de tailwind solo para hacer que se vea bien, y luego un div con un ID root. Y ahí es donde vamos a renderizar nuestro componente del servidor. Y vamos a usar este archivo del cliente para hacerlo. Así que vamos a escribir este archivo aquí, _client. Así que lo pongo aquí, _client.jsx. Y en la parte superior, voy a importar algunos recursos. Primero, necesitamos createRoot, que es la forma en React de renderizar algo en un div.

Probablemente lo estarías usando para siempre, lo supieras o no. Y también tenemos el lado del cliente de la historia del DOM del servidor. Esto es createFromFetch, un asistente realmente increíble de React Core que toma una llamada fetch al componente del servidor que acabamos de hacer y lo convierte en DOM virtual para nosotros. Entonces, para hacer eso, primero voy a hacer mi root. Va a ser un document getElementByID root. Y también necesitamos llamar a createRoot en eso. Ahí vamos. Y vemos un pequeño error de TypeScript. Solo voy a decir que se calle. Sabemos que podría estar indefinido, pero si está indefinido, toda nuestra aplicación se bloquea. Y no podemos hacer mucho más que eso. Entonces digamos create from fetch y luego haremos fetch desde ese slash RSC. Y luego, cada vez que un componente se transmite por el cable, sin importar cuántas veces necesite resolver suspense render en ese div el componente, la transmisión actualizada. Y eso es todo lo que tienes que hacer, lo creas o no. Necesitamos actualizar nuestro servidor. Primero, para construir este archivo, voy a bajar a mi ES build y voy a agregar otra llamada para construir el archivo del cliente. Esto va a tener un conjunto ligeramente diferente de configuraciones. Entonces lo voy a ejecutar de manera diferente aquí. Configuración del cliente, esto va a tener el mismo bundler y lo convertirá en ESM que teníamos antes, excepto que ahora también vamos a empaquetar paquetes NPM. Obviamente no tienes que empaquetar NPM en Node pero en el navegador, necesitas empaquetar todas tus dependencias. Entonces eso es lo que vamos a hacer. Y vamos a empaquetar el archivo del cliente y en la parte superior aquí, vamos a... Oh, ¿qué vamos a hacer? Oh, también necesitamos exponer nuestra carpeta de construcción en la red porque en HTML, vemos que vamos a slash build slash client y nuestro servidor necesita responder con el archivo que acabamos de construir. Entonces, para eso, voy a agregar app.use y luego si intentas obtener algo de la carpeta de construcción, sírvelo como un activo estático. Y este es un asistente muy agradable que Hano nos da llamado serve static y eso va a construir todo estáticamente. Así que déjame agarrar esa importación, serve static. Y ahora deberíamos tener todo lo que necesitamos para al menos ver el archivo del cliente aquí. Entonces deberíamos ver en nuestra carpeta de construcción, aparece el cliente subrayado y toda esa hermosa bondad de React empaquetada. Son alrededor de 50 o 60k para empezar. Entonces, los componentes del servidor no son 0js.

Te están mintiendo si creías eso. En realidad, también es un receptor del cliente. Entonces, si subimos aquí, podemos ver que ahora está cargando todo y nuestro álbum se transmite a la vista, pero esta vez está renderizando elementos. Mira eso. Entonces, si refresco esto, puedes ver que aparece la carga y luego entra el resto. También voy a agregar algunos estilos, solo para que se vea un poco más agradable. Los escribí antes para mostrar, porque todos ustedes no tienen que verme centrar un div. Así que aquí tenemos flexbox, algunas cosas básicas de tailwind y si vuelvo a ejecutar eso, deberíamos ver una configuración más agradable aquí, llamada Spodifant, que es un falso Spotify. No lo sé. Y vemos que tenemos nuestra publicación y todas nuestras canciones renderizándose. Genial.

Entonces, usamos React para hacer lo que PHP ha hecho durante dos décadas. ¿Qué pasa con la interactividad? Eso es para lo que está destinado React. Entonces, vamos a necesitar agregar algo de interactividad. Hagamos el ejemplo básico de un botón de me gusta. Así que haremos like.jsx, y para esto estoy armando el contador básico que has visto en cada demostración anterior. Llevar un registro de los me gusta, y aquí abajo tenemos set likes y mostramos al usuario cuántos me gusta hemos incrementado desde allí. Todo parece igual, excepto en la parte superior aquí tenemos una mágica directiva use-client. Quizás hayas oído hablar de esto. Esta es la nueva bandera en React para decir que cuando llegas a un componente que comienza con esto, descárgalo por separado para que no lo rendericemos accidentalmente en el servidor en la transmisión. Así que ahora necesitamos crear alguna lógica de bundler para buscar use-client. Así que déjame volver aquí para hacer eso. Vamos a necesitar un plugin. Esta es una característica en todos los principales bundler. También voy a armar un plugin básico para nosotros. T-plugin, ahí vamos. Se va a llamar resolve-client-imports, y esta es una verificación básica para decir cada vez que intentas importar un archivo .jsx como, oh, déjame hacer eso dentro de mi servidor componente. Digamos que cada álbum es agradable. Podemos ver que like.jsx se importa aquí, y nuestro bundler dirá en cualquier momento que obtengas uno de esas importaciones elegantes, oh, parece que también necesito guardar algo. Ahí vamos.

Deberías leer el contenido del archivo. Así que digamos contenido, oh, desearía poder hacer dno.readfile. Tengo que usar promesas de Node. Así que permíteme hacer una lectura de archivo desde allí, y luego podemos tomar el contenido y decir si el archivo comienza con. Voy a hacer comillas dobles, comillas simples, use client. También verifica las comillas dobles por cierto. Eso me ha quemado en el pasado, pero sé que estamos usando comillas simples aquí. Entonces, si comienza con use client, primero quiero hacer un seguimiento de todos esos archivos del cliente. Así que permíteme crear un pequeño mapa aquí arriba. Estos van a ser los puntos de entrada del cliente, y lo haré un conjunto. Esto es básicamente un array que elimina duplicados. Y aquí voy a decir, hey encontramos un componente del cliente, agrégalo a la lista y lo empaquetaremos más tarde. También le diremos a ES Build que haga un retorno temprano aquí, porque queremos manejar esto nosotros mismos. Así que diré, va a ser la ruta relativa, pero reemplázala con la ruta de salida construida. Así que vamos a construir nuestro JSX a JS en un momento. Así que dile a ES Build que lo encontrarás aquí. Trátalo como externo. No intentes empaquetarlo en nuestro paquete del servidor. Y luego lo vamos a poner en nuestra carpeta de compilación para que el navegador lo importe.

Bien, ahora que hemos simulado eso, necesitamos construir nuestros componentes del cliente. Así que permíteme ir aquí abajo en nuestros puntos de entrada. Vamos a añadir nuestros puntos de entrada del cliente a la lista. Y vamos a desactivar los derechos de archivo, porque ahora quiero ser el dueño de los archivos.

Vamos a hacer un poco de post-procesamiento en el contenido de los archivos. Así que permíteme decir, aquí están los archivos de salida. Salen de esbuild. Y para cada uno de ellos, permíteme hacer un pequeño bucle, asíncrono, archivo. Para cada archivo en el bucle, vamos a rastrear todas las exportaciones de ese archivo. Porque en React podrías exportar cualquier número de componentes. Necesitamos etiquetar todos ellos como referencias del cliente. Oh hombre, desearía estar usando Deno, deja de recordármelo.

Así que aquí arriba, voy a importar este módulo genial llamado esmodule-lexer. Este es un compilador basado en go que es capaz de recorrer un archivo y analizar todos los nombres de exportación para que no tengamos que hacer todas las locuras de regex nosotros mismos. Así que diré, aquí están las exportaciones. Salen de analizar el contenido de los archivos, el contenido del texto, eso es. Y para cada una de las exportaciones, para ext de exportaciones, vamos a escribir en el archivo algunas etiquetas extra en esas exportaciones. Así que voy a hacer una variable mutable aquí. Nuevos contenidos, vamos a empezarlo como el contenido del archivo. Y vamos a añadir alguna información nueva. Así que nuevos contenidos, más iguales. Y luego aquí abajo vamos a decir, para cada nombre de exportación, vamos a añadir un tipo de decorador. Y esto va a tener un valor especial. Símbolo para react referencia del cliente. Esto es algo que React va a buscar mientras renderiza todos los componentos en el árbol. Si alguna vez encuentra una función de componente con la etiqueta react referencia del cliente, sabe, oh, he encontrado un componente del cliente. Dime qué hacer. Así que primero le dijimos que es un componente del cliente. Ahora tenemos que decirle, bien, cuando encuentres un componente del cliente, no intentes renderizarlo. En su lugar, simúlalo con una importación y lo importaremos desde nuestro servidor.

Dentro del navegador. De esa manera podemos ejecutar use state y hacerlo interactivo. Entonces, ¿cómo lo etiquetamos? Bueno, vamos a añadir una clave especial a cada uno de estos. Y la clave puede ser cualquier identificador único. Pero un identificador que sea bastante fácil de usar. Simplemente la ruta del archivo más el nombre de la exportación. Porque eso debería ser muy único. Y vamos a escribir esto en un mapa que vamos a pasar a nuestro servidor.

Voy a hacerlo global. No uses globales en casa, pero es una demostración. Así que vamos a hacer eso. Vamos a decir mapa de componentes del cliente, objeto vacío, y aquí abajo, oh, probablemente debería hacerlo singular. Ahí vamos. Aquí abajo voy a pasar el mapa de componentes. Así que mientras está renderizando el stream, tiene este mapa de todos los componentes del cliente que existen, para que pueda convertirlo en declaraciones de importación. Aquí abajo también voy a actualizar nuestro mapa de componentes del cliente en la clave. Y necesita un poco de metadatos. Así que primero vamos a decirle dónde encontrarlo en el servidor, que va a estar dentro de slash build slash like dot js. Y necesitamos un poco de masaje para obtener ese tipo de ruta. Así que sí, resuélvelo desde la carpeta de construcción, toma la ruta del archivo. Sólo sé que esto va a convertir nuestro botón de like en slash build slash like dot js. Así que podemos importarlo desde esta carpeta de construcción en tu navegador. El resto es bastante sencillo. El nombre va a ser el nombre de la exportación en el archivo. Vamos a tener chunks como un array vacío, porque eso es una característica de webpack. Apaga eso. Y también haremos async true, lo que significa hacer una importación asíncrona. ¡Oh no! ¡Ah! Maldita sea, estábamos llegando. Vale. ¿Cable? Sí, déjame comprobar eso.

Parece que lo tengo allí. ¿Es un problema de sobrecalentamiento? Quizás. Quizás. ¿Debería esperar? ¡Esperaré la placa! ¡Hey! Eso es todo, gente. Sí, no salgan de aquí temprano. Todos ustedes tienen buenas reacciones, está bien. Compartir en vivo, ¡en tu máquina! ¡Todos unirse a la compartición en vivo! Oh Dios, ¿hago eso? Eso parece lo menos seguro del mundo. Pero podría, podría. Vale. Bueno, podemos esperar. El problema es que no puedo seguir hablando de mis cosas. Todos ustedes necesitan ver lo que estoy haciendo. ¡Hey! ¡Muy bien! Eso es bueno, estamos casi al final.

Entonces, oh Dios, ¡vale! Mantendremos el ritmo, mantendremos el ritmo como lo teníamos antes. Entonces, vale, tenemos nuestro mapa de cliente, ¿verdad? Estamos llevando un registro de todos nuestros componentes de cliente. Marcamos el tipo. Lo último que necesitamos hacer es decirle, cada vez que encuentres esta exportación, busca este ID en el mapa. Así que tenemos nuestro mapa aquí, y podemos ver JsonStringify, la clave, simplemente poner comillas alrededor básicamente. De esa manera, cada vez que rastrea el componente, sabe buscar esta importación para resolverlo en tu navegador. Eso debería ser todo lo que necesitamos. Lo último que tengo que hacer es simplemente escribir el archivo en el sistema de archivos, porque estamos poseyendo ese proceso ahora. Y con suerte, cruzando los dedos, esto debería ser todo lo que necesitamos para renderizarlo. Así que vemos que aparecen un par de chunks más aquí. Tenemos el botón de like, empaquetado para el navegador. Y vemos que la exportación de like fue etiquetada con nuestra referencia de cliente. ¡Muy guay! Así que ahora, si visitamos esto en nuestro navegador. Veremos obteniendo álbumes, y luego un error. Pero este es esperado. Así que aquí abajo, al menos espero que sea el uno. Así que si miramos aquí, vemos que webpack require no está definido.

Eso es porque webpack no utiliza los standards del navegador, sorprendentemente. Entonces, si saltamos a nuestro archivo de cliente, podemos agregar esta pequeña cosa. Lo acabo de escribir, hack de webpack. Esto está diciendo que cada vez que intenta ir a la ventana y hacer un webpack require, simplemente use la plataforma y diga, haga una importación a mi servidor. Tengo el archivo construido para ti. Y el ID va a ser /build/like.js. Así que allá vamos. Ahora, si reiniciamos nuestro servidor, y nos dirigimos aquí, deberíamos ver obteniendo álbumes. Y luego nuestros álbumes aparecen con botones clickeables. Mira eso. Sí. Muy bien. Entonces, es realmente la primera ejecución en la que nada salió mal excepto el proyector.

Bien. Así que eso es todo lo que quería mostrarte para la demo básica, pero por supuesto hay mucho más que puedes hacer desde aquí. Por ejemplo, podrías haber estado pensando, bueno, eso es solo una ruta. ¿Cómo configuraría un enrutador de archivos? ¿Y también cómo solicitaría este componente de nuevo? Supongamos que tengo un cuadro de búsqueda y quiero hacer un parámetro de consulta con la búsqueda y obtener una nueva lista de álbumes desde el servidor. De hecho, pasé por todas esas cosas en un stream de invitados con Dan Abramov hace un tiempo atrás. Así que si quieres revisar este recurso, estará en el readme en un repositorio que compartiré al final. Es un video largo. Sí, son cuatro horas, pero hay muchos capítulos aquí para saltar a tu parte favorita. Así que si solo quieres aprender a configurar un cuadro de búsqueda o aprender a configurar un enrutador O simplemente quieres escuchar a Dan Abramov y a mí charlar sobre GraphQL. Todo eso está disponible aquí y puedes hojearlo para encontrar un recurso.

Por otro lado, tengo videos de un minuto, que sabes que podrías ver. ¿Cuántos son? Sesenta veces cuatro cortos en el tiempo de ese video. Puedes encontrar todos esos en mi canal de YouTube y también en Twitter. Estoy en bholmesdev en todas las principales plataformas. Así que si encontraste esto útil en absoluto, sígueme allí y comparto muchos recursos sobre React y también Astro.

Vale. Eso es todo lo que quería mostrarles a todos. Gracias por tu tiempo. Aplaudan chicos, vamos.

Vamos con esta. ¿Vale la pena usar RSEs fuera de Next.js? ¿Vale la pena? Vale la pena... Vale. ¿Somos dignos? ¿Vale la pena usarlos fuera? ¿Vale la pena usarlos? Sí. Diría que probablemente es demasiado temprano para usarlos fuera de Next.js. La única razón por la que pasé todas las horas para averiguar eso, trabajo en un marco que está en Next.js llamado Astro. Así que tenía mucha curiosidad de cómo podemos hacer que esto funcione dentro de V popular bundle... O, digamos, Astro. O Astro. O, sí. Sí. ¿Alguna noción de cuándo podría suceder eso realmente? No lo sé. Vale. Bien. Sí. Estoy tratando de conseguir como un enchufe, ya sabes, o algo... Exactamente. ¿Sabes? Sí. Mira en los próximos cinco trimestres fiscales. Tal vez, no lo sé. No sé cómo mides las cosas, profesionalmente.

Algo de, ya sabes... Algo de tiempo. Pasará. Correcto. Estamos construidos sobre VT, sin embargo. Por lo tanto, es un esfuerzo en curso para incorporarlo en VT, que es un bundler para aplicaciones React sencillas. Astro, Sveltekit y Nuxt también están construidos sobre VT. Por lo tanto, es todo un equipo central de personas que están interesadas en tratar de descifrarlo. Y VT utiliza el bundler que estaba mostrando. Por lo tanto, hay mucho que podríamos hacer para descifrarlo. Pero las acciones del servidor complican las cosas, es un problema muy difícil. Eso requeriría algunos cambios importantes. Así que por ahora es algo solo compatible con webpack.

Bueno, tengo que decir, supongo que la pregunta más votada es una línea de Jurassic Park. ¿Alguna vez te has preguntado si nuestros científicos estaban tan preocupados por si podían, que nunca se detuvieron a preguntar si deberían. Pero esa es una pregunta interesante. En el contexto aquí, ahora que sabes tanto sobre los React componentes del servidor. ¿Estás como, uh, eso parece una buena idea o, uh, no sé. He mirado en el vientre de la bestia. Me asustó lo que vi. ¿Hizo esto, como, mirar hacia atrás? Sí. Sí, con errores de servidor y cliente. Oh sí. Sí. Um, así que siento que definitivamente es algo que debería ser apoyado por cualquiera que esté utilizando React o los principales frameworks porque va a dar forma al ecosistema a partir de aquí. Porque muchas bibliotecas ya están haciendo la transición para utilizar componentes del servidor y poner ese decorador de cliente para que si estás en ese contexto, todavía funciona como tú lo esperarías. Así que creo que incluso si tu marco de trabajo no tiene usuarios que escriban componentes del servidor día a día sólo para apoyar las principales bibliotecas de React, va a ser necesario en el próximo quizás como uno o dos años. Definitivamente estoy curioso por los sentimientos en el panel de componentes del servidor cuando lleguemos a eso. Absolutamente. Pero, sí, parece que estamos en los primeros días. Tenemos los patterns. Tenemos los primitivos. La gente los está probando en producción. Ahora el ecosistema necesita moverse en esa dirección y eso llevará más tiempo. Pensé que vi una pregunta, no la veo aquí, pero sobre lo que los autores de las bibliotecas deberían hacer con RSCs y ¿alguna idea sobre eso? Sí. Quiero decir que realmente depende de para qué sea tu biblioteca porque sé que hay bibliotecas como Redwood y Remix que han estado creo que probándolo en formas muy, muy tempranas para ver si esto tiene sentido con el modelo que tenemos ahora porque la gente ha hecho felizmente aplicaciones de React renderizadas por el servidor durante un tiempo y no necesitas componentes del servidor para construir aplicaciones efectivas. Son sólo esta mejora para hacerlas un poco diferente. Quizás hacerlas sólo del lado del servidor para cosas que lo necesiten. Así que creo que es algo que cada autor de marco de trabajo debería mirar, intentar hacer funcionar, y esperemos que podamos trabajar juntos utilizando un bundler compartido como VEET, para que si una persona se pone realmente curiosa y lo construye, todos podemos beneficiarnos y todos los marcos pueden probarlo. Mucho amor por VEET. Aplausos para VEET. Sí, VEET. Vamos.

VEET. Muy bien. Me encanta esta pregunta en particular. Así que nuestras APIs de componentes del servidor aún no están documentadas. ¿Cuál fue tu proceso para descifrar esto? Código fuente. Sí, claro. Quiero decir, eso es realmente importante. Como desarrollador, es una buena habilidad aprender a entrar en ello, descifrarlo. Sí. Y también enviando mensajes directos casualmente a Dan Abramoff. Sí. Bueno, OK. Eso fue muy útil. Más útil de lo que pensarías. Bueno, en realidad pensarías eso, estoy seguro. Pero creo que los autores de los marcos de trabajo estarían interesados. Quiero decir, si tienes preguntas reales y genuinas para la gente que son significativas y como, hey, hice el esfuerzo aquí. ¿Puedes ayudarme? Sí, están dispuestos a ello. Sí, el equipo meta es realmente, realmente receptivo en este momento. De hecho, recibí otro mensaje de Matt en el equipo meta que está tratando de trabajar en recursos de educación. ¿Cómo entiendes los componentes del servidor a nivel raíz? Así que creo que, como mínimo, hacer todas estas preguntas debería conducir a una mejor documentación que explique lo que está pasando bajo el capó. Eso es lo que espero. Y también, sí, quiero decir, sumergirse en el código fuente no es... Bueno, está bien, es bastante aterrador, pero no es tan aterrador como podrías pensar. Como leer una buena novela de misterio. Sí, y ya hay algunos recursos. Como el Equipo Central tiene una demo de React Flight. Flight es como su nombre interno para los componentes del servidor de hace años. Hay repositorios en los que me metí para entender cómo encajan las piezas. Así es como encontré la biblioteca de transmisión legible y create from fetch, que es la función más mágica que hace mucho por ti.

Así que hay recursos. Están ahí fuera. No tienes que ir totalmente por tu cuenta.

Muy bien, ¿podemos hacer lo mismo para los micro frontends? O supongo, ¿cómo encajan los RSCs en el modelo de micro frontends o islas? Correcto, sí, islas, TM. Eso es algo que... Astro solo característica. Inventamos las islas. No, en realidad fue una publicación de blog del equipo de Preact, creo, que habló de las islas hace un tiempo. Vale, sí. Solo voy a volcar su captura de pantalla explicando las islas y la pondré en nuestra documentación. Esto existe. Está bien.

Sí. Breve introducción a lo que son las islas, es una forma de poner un componente del lado del cliente dentro de una plantilla renderizada por el servidor. Así que tienes algo de HTML, se renderiza en el lado del servidor. Y luego, en este pequeño div aquí, es como, quiero un carrusel de imágenes aquí y el resto es solo HTML. Y ese es el punto donde un bundler puede decir, oh, eso es una isla. Usaré Preact para cargar un componente en ese div. o elegir cuándo cargarlo, todas esas cosas. Así que los componentes del servidor son un poco más difíciles, porque los componentes del servidor son algo así como la arquitectura de las islas, porque cuando viste la directiva use-client, estás creando esta pequeña isla del cliente donde es como el botón Like va a cargar JavaScript, pero el resto de él no. Esa es realmente la base de lo que es una isla. Así que parece que los componentes del servidor son una nueva forma de hacer islas. Y podrías tener una isla de componentes del servidor dentro de HTML que también renderiza más cosas. Podrías volverte loco, pero es solo otra forma de hacerlo, en comparación con lo que está haciendo Astra.

¿Prevés algún problema de security con los componentes del servidor? Siempre surge la inyección de SQL. No sé por qué. Tenemos herramientas para eso. Correcto, en esa demo de Versal que mostraron, que no era – Clásico. – inyección de SQL. Me recuerdo a mí mismo de ello.

Lo fue. Sí, creo que – No, no lo fue. ¿No lo fue? Oh, no lo fue. No, porque ellos manejan eso – Correcto, correcto, correcto, ellos usan la cosa de la plantilla. Correcto, sí, ellos usan el – Si no sabes de qué estamos hablando, no te preocupes, no es algo. Pero sí, creo que la security para las acciones del servidor es realmente difícil.

No pudimos demostrar eso porque agrupar las acciones del servidor es todo un desafío, pero la parte extraña de ellas es que puedes escribir una función de servidor, y puedes escribirla de alguna manera dentro del componente. Así que podrías escribir un manejador que diga, escribe en la database, y puedes pasarlo a un formulario, y podrías tener un cierre allí donde escribiste tu backend dentro de un componente, así que si tuvieras estas variables que se están pasando a esa función, podrías por error agrupar esas variables para el cliente, y ahora hay muchas más salvaguardas alrededor de eso. Como, si tienes use client, no puedes poner una acción de servidor allí, tienes que ponerla un poco más arriba, y hay muchas bibliotecas divertidas, como la referencia taint donde puedes – Sí, sé cómo mancharlo. Como, sí, puedes marcar algo como, si esto alguna vez llega al cliente, explota la construcción, lo cual es – es una característica de seguridad agradable, honestamente – Característica de seguridad. Característica de seguridad, la habría usado regularmente. Sí.

Muy bien, un gran aplauso para Ben, muchas gracias. Gracias, lo aprecio.