Así que ahora que tenemos nuestras credenciales de Miro en nuestro archivo EMV, podemos asegurarnos de que estamos en la carpeta correcta aquí. Así que nos movemos a Miro next JS, y tenemos todos nuestros archivos aquí donde los esperamos. Y luego vamos a ejecutar <a href="/tags/yarn">yarn</a>. Y una vez que esto esté hecho, podemos ejecutar <a href="/tags/yarn">yarn</a> start. Pero primero déjame detener mi aplicación anterior aquí. Y minimizar esto para no confundirnos. Así que <a href="/tags/yarn">Yarn</a> Start. Y esto va a tener nuestra aplicación funcionando en localhost3000. Así que vamos a localhost. Y refrescamos la página aquí. Tenemos nuestra nueva aplicación de plantilla. Y dice, felicidades, acabas de crear tu primera aplicación. Y podemos autorizar con Miro. Así que como decía Mattin, vamos a usar la API de Miro porque es lo que mejor conocemos. Y para esto, hemos configurado en mi cuenta, he configurado esta masterclass de <a href="/tags/react-server-components">React Server Components</a>. Si estás usando tu propia cuenta de Miro, verás todos los equipos bajo tu propia cuenta de Miro. Así que puedes autorizar el equipo que quieras, o puedes usar las credenciales de demostración que tenemos en las diapositivas. Así que ves aquí que ahora los tableros que tengo bajo mi cuenta de Miro están realmente listados aquí en nuestra aplicación de plantilla. Así que si fuera a Miro, por ejemplo, y voy a este equipo, tengo dos tableros, react-summit-test-board2 y react-summit-test-board1. Y eso es lo que estamos viendo cargado aquí, donde estamos llamando a la API de Miro desde nuestra aplicación. Antes de continuar, Will, acabo de darme cuenta de algo. Estamos hablando de Miro y de tableros, pero tal vez no sé si todos están familiarizados con Miro. Así que por levantamiento de manos, si no estás familiarizado con Miro y necesitamos explicar un poco, porque entonces, sí, podrías perderte, no sabes de qué estamos hablando. Sí, sí, así que, para aquellos de ustedes que no están familiarizados, Miro es como una plataforma de colaboración visual donde básicamente puedes usar un tablero de Miro para arrastrar y soltar cosas como si fuera una pizarra virtual, esencialmente. así que más adelante en la masterclass vamos a usar la API de Miro para listar muchos de estos elementos que ves en estos tableros así que podremos hacer clic en estos tableros y luego ver los elementos que están realmente en estos tableros si eso tiene sentido y veo que veamos en el chat aquí tenemos a un par de personas con un error sí oh sí okay entonces como mencionó Metin, incluso querrás usar la versión 20 de NVM. Avísanos si eso soluciona las cosas y daremos a todos un momento para ponerse al día aquí antes de seguir adelante. Así que, como decíamos antes, esta aplicación va a ser la base de lo que vamos a hacer a continuación. Y luego otra cosa a mencionar es que a lo largo de la masterclass, si estás como, vale, estoy totalmente perdido, pero no quiero, ya sabes, perderme el resto de la masterclass, lo que puedes hacer es que puedes revisar las ramas que tenemos al final de cada sección. Así que puedes escanear este código QR para GitHub o copiar este enlace, y esto te llevará a básicamente una versión del proyecto que estamos usando que está en el estado en el que estamos, en la masterclass en este momento. Así que esta versión es ligeramente diferente a la que acabamos de arrancar desde la <a href="/tags/cli">terminal</a> porque como met and mentioned we we made a small update to the package we used earlier this morning pero la funcionalidad es totalmente la misma así que no hay diferencia funcional tal vez sólo una diferencia en algunas de las versiones que ves en este repositorio de GitHub cualquiera que pueda haberse perdido esto en el chat bennett está mencionando que recibe un error de que necesita usar <a href="/tags/npm">NPM</a> o la versión 20 o superior de node y eso es porque <a href="/tags/nextjs">Next.js</a> lo requiere. Así que por eso si ejecutas create Miro app con el fragmento que Bill mostró fallará si tienes una versión de node inferior a 20 lo cual es algo que deberías estar actualizando de todos modos porque la versión LTS de node en este punto es como 20.9.3, .7 punto algo punto algo. Así que al menos 20 puntos y luego más alto. Así que eso es lo que requiere el equipo de <a href="/tags/nextjs">Next.js</a>. También pegaremos las credenciales de demostración aquí en el chat. Si te gustaría usar estas en su lugar. Así que este sería el inicio de sesión de Google, y esta sería la contraseña de Google. Y luego básicamente lo que puedes hacer es iniciar sesión en Mirror con Google, y tendrás acceso a la cuenta que hemos estado usando. Verás nuestro tablero de pruebas de <a href="/tags/react-components">React</a> Summit uno y <a href="/tags/react-components">React</a> Summit tablero de pruebas dos. Jacob menciona que no ve ningún tablero al que tenga acceso con las credenciales de demostración. Así que cuando uses las credenciales de demostración y autorices el equipo en Miro, asegúrate de autorizar este equipo de la masterclass de <a href="/tags/react-server-components">React Server Components</a> porque ahí es donde están estos tableros. Si autorizas a un equipo diferente, es posible que no veas ningún tablero porque puede que no haya ningún tablero bajo ese equipo. Si eso tiene sentido. Y el ID del cliente y el secreto del cliente también pueden pegarlos. Así que volviendo aquí, estas son las credenciales. Así que puedes tomar ese fragmento entero y reemplazar todo en la vista de morir con eso. Así que mientras todos están haciendo eso, diremos que cuando hayas terminado y estés en el punto en el que realmente es que ves la aplicación con los dos tableros de Miro listados, que levantes la mano en Zoom, para que sepan cuando todos han terminado. Y si tienes alguna pregunta, sólo avísanos. Así que sólo como recordatorio, una vez que hayas llegado a este punto, deberías ver algo como esta página aquí, donde listará los tableros bajo el equipo. Si no ves ningún tablero allí, podría ser porque el equipo que estás usando no tiene ningún tablero. Así que sólo comprueba en qué equipo estás.

Y si estás en un equipo que no tiene uno, podrías simplemente crear un nuevo tablero haciendo clic en un nuevo tablero aquí, y luego quizás añadir un par de elementos como una nota adhesiva o algo así, que usaremos más adelante. Así que para seguir adelante, antes de seguir adelante, todos podrían tener mejor suerte simplemente creando sus propias credenciales. Así que lo que eso implica es ejecutar este comando en tu <a href="/tags/cli">terminal</a>, y luego hacer clic en el enlace que aparece en la <a href="/tags/cli">terminal</a> aquí, que te llevará a una página donde puedes generar tu propio ID de cliente y secreto de cliente. Y eso es lo que vas a pegar en tu .ENV aquí. Así que puedes ver que mi ID de cliente y secreto de cliente son diferentes de las credenciales en la demo porque creé esto sobre la marcha. Bien. Jacob también ha terminado. Buen trabajo. Sí, no está ahí. Hice mi propia aplicación en lugar de la demo. También podemos intentar cambiar estas credenciales de demostración con estas también. Tal vez esto dará a la gente una mejor visión. JAREN LELERMANN BELKERINGEN- Jaron no puede hacer clic en el enlace. Si haces clic en el enlace en <a href="/tags/cli">Terminal</a>, podría ser que necesites presionar Command en tu teclado y luego hacer clic en él. Y de lo contrario, simplemente copia todo el enlace y pégalo en tu navegador. Bien. Así que ahora creo que seguiremos adelante y seguiremos a Metin en el tablero de Miro y entraremos en la parte divertida de la masterclass. Bien. Así que hemos planeado un descanso de cinco minutos. ¿Alguien necesita un descanso? Entonces avísanos si quieres discutir algo que te pareció difícil o poco claro. Entonces también avísanos. Este es un buen momento para ponerse al día con lo que hemos estado haciendo. Así que avísame si hay algo que quieras discutir sobre la parte que hemos estado haciendo hasta este punto. En nuestro ejemplo, estamos hablando con una API. Y lo que puedes haber notado es que estamos simplemente diciendo dentro de, este no es el código real que está en tu aplicación, pero es la misma idea. Estás simplemente diciendo await y luego usando fetch directamente. Así que solo fetch nativo, que se está utilizando para hablar con nuestra biblioteca de cliente o nuestra API, lo siento. Y esto no está sucediendo en un <a href="/tags/react-hooks">use effect</a>. Así que tradicionalmente, lo que estarías haciendo, la forma más fácil de hablar con cualquier API es tener un estado con <a href="/tags/data">data</a> y luego un <a href="/tags/react-hooks">use effect</a> que habla con tu servidor y escucha la respuesta, llama a response.json, y pone eso en el estado. Eso es lo que tradicionalmente estarías haciendo. Pero con los componentes del servidor, puedes simplemente tener un componente asíncrono y llamar a await y luego a fetch cualquiera que sea tu función fetch directamente. Y como esto está sucediendo en el servidor, la representación simplemente se pausará allí, esperará tu respuesta del servidor y luego continuará para devolver tu componente, así que una cosa que el equipo de <a href="/tags/nextjs">Next.js</a> ha construido para nosotros para hacer la representación de una página web mucho más fácil es que tienen esta estructura en páginas, así que una página puede tener una page.csx layout.dsx error.dsx loading in a head.dsx el poder en eso es que hablemos primero de layout.tsx. Vamos a hablar hipotéticamente de construir un sitio web de noticias, que casualmente se llama newswebsite.com. Esta página, al igual que cualquier otra página web, tiene un encabezado. Crearé un header.tsx e importaré eso en mi layout.tsx, que está en la carpeta raíz de la aplicación, sí, y eso tendrá mi menú y mi logo porque quiero que cada página que se cargue tenga este menú bien, entonces, si quiero algo que sea específico para la página de inicio que no se va a compartir con otras páginas, puedo poner eso en page.tsx Entonces digamos que nuestro usuario va a ir a newswebsite.com slash article ID. Entonces el enrutamiento que está incorporado en <a href="/tags/nextjs">Next.js</a> va a capturar eso porque agregamos corchetes aquí a este nombre de carpeta. Así que se llama corchete de apertura article ID corchete de cierre. Y dentro, ves, repetí un poco la estructura que también está en la carpeta de la aplicación principal. Tengo un loading.tsx error y una página y un diseño. Ahora, lo que puedo hacer es dentro de layout.tsx, puedo hacer todo lo que es lo mismo para cada artículo y cada subruta que podría tener dentro de un artículo. Así que digamos que tendría comentarios con enlaces profundos, entonces tendría una carpeta dentro de aquí. Así que saquemos esta pequeña cosa del camino. Podría agregar dentro de la carpeta article ID, comments ID. Y dentro de aquí, de nuevo, podría tener un layout.tsx. y todo lo que está dentro de un diseño se comparte con los hijos. Así que si estoy en comment ID, así que estaré en newswebsite.com slash article ID slash comment ID. Veré el diseño, este diseño, y este diseño. Page to the aspects es solo el material que es específico para esta ruta actual. Sé que esto es un poco difícil de entender así que por favor avísame si esto es poco claro para alguien bien ¿el diseño del hijo anula el diseño del padre sí así que lo que puedo hacer para hacerlo un poco más claro digamos que tendremos un fondo aquí, digamos que esto es layout.tsx. Y este será mi principal.

Y esto tendrá como mi menú de encabezado. Y esto serán los hijos. Entonces, si estoy en el ID del artículo slash newswebsite.com slash article ID, esto renderizará layout.tsx es como tu índice en realidad. Y los hijos serán page.tsx. ¿Está claro? Ahora, si voy más adentro de ese comentario, entonces los hijos serán, como la página de TSX también aceptará hijos y será el componente que devuelvas desde tu archivo de ID de comentario. Y esto es muy conveniente y es realmente fácil tener enrutamiento, porque estás simplemente creando archivos, ¿verdad? Ahora lo interesante es que ves que también tengo este loading.tsx. Si vengo a este verdadero ID de artículo y esa es mi ruta inicial, entonces se renderizará en el servidor. Pero si vengo de la página de inicio y hago clic en un enlace a un artículo, se renderizará en el cliente. Y lo que sucederá entonces es que el loading.tsx se mostrará mientras estamos esperando el resultado de este fetch <a href="/tags/data">data</a> o un fetch de artículo en nuestro caso. Así que podemos agregar un spinner en nuestro loading.tsx o simplemente el texto cargando, lo que tengas como animación de carga o cualquier cosa para llenar el tiempo. Así que es súper fácil crear un componente de carga. Y si simplemente recargas esta página, se renderizará en el servidor nuevamente. Así que no verás el cargador. Los <a href="/tags/data">data</a> simplemente se renderizarán en el servidor. Y luego lo mismo ocurre con el error. Así que si se lanza un error desde el componente, entonces se renderizará error.tsx. y no tienes que preocuparte por ello. Solo necesitas asegurarte de que, digamos, tu ID de artículo que está aquí. Entonces digamos, es FUBAR, y no tienes un artículo en tu sitio web de noticias que se llama FUBAR, entonces tu fetch debería lanzar un error, y luego el error se utilizará como el siguiente paso. La única desventaja en mi experiencia, en mi opinión, es que si voy a tener algunas rutas, así que noticias y archivo y acerca de y trabajos y contacto, tendré que crear carpetas con layout.tsx para noticias y archivo para acerca de y para trabajos y para contacto, etc. Y sí, si voy a estar trabajando en algunos de ellos al mismo tiempo, tendré como seis pestañas abiertas que se llaman layout.tsx, lo cual puede ser molesto, lo cual puedes superar un poco simplemente creando una página de trabajos page.tsx e importándola dentro de la página.tsx para trabajos así que digamos que creo una página de trabajos ya no puedo escribir más jobs.page.tsx y dentro de page.tsx puedo simplemente importar y reexportar este. Y eso es solo para remediar el problema de que puedes tener muchas pestañas abiertas con el mismo nombre. La razón por la que este esquema de nombres es así, puedes ver esto en la charla que Ben Holmes dio la semana pasada, donde reconstruyó los componentes del servidor desde cero. No puedo explicarlo ahora, pero entonces nos quedaremos sin tiempo. Lo cual no creo que quieras, pero es una charla muy interesante. Así que para aquellos que aún no lo han visto, la charla de Ben Holmes sobre la recreación de componentes de servidor desde cero es realmente interesante. Muy bien. Así que es hora de, uh, trabajar un poco. Así que la primera tarea que tenemos es actualizar la página de inicio. Así que el archivo PageShotDsx. Así que al menos todos los... Oh, ya hemos hecho eso. Obtienes la primera tarea gratis. Pero eso es todo. Así es. Gracias a todos por venir. No, lo siento. Seamos serios por un minuto. Estas personas están aquí para aprender, Will. Siguiente tarea. Hazlos clickeables. Entonces, lo que queremos hacer es hacer enlaces profundos para los tableros de Miro para que puedas hacer clic en ellos y obtener los metadatos de ese tablero. Así que lo que necesitas hacer es asegurarte de que necesitas usar el enlace desde el siguiente. así que si vas a ir crea tu página edita la página necesitas importar el enlace desde el siguiente slash link así como un pequeño ayudante así que si tienes tu um page.tsx um renderiza una uh lista ordenada con todos los tableros y los tableros vienen de obtener <a href="/tags/data">data</a> y ves que obtener <a href="/tags/data">data</a> está en el mismo archivo es solo una función asíncrona y después de un poco de código estándar en línea para mí es como 21 hasta 23. Tal vez tenga sentido si comparto mi pantalla ahora, por cierto. Así que ves que este tablero viene de Obtener <a href="/tags/data">Data</a>. Obtener <a href="/tags/data">Data</a> está aquí. Y luego esto es solo un montón de código estándar para ver si realmente estás conectado. Tiene código estándar, múltiple, singular, código estándar. Y estamos empujando en board.name.

Pero para poder desvincularlo, necesitarás una ID, Lo que puedes hacer es mirar en la respuesta de obtener todos los tableros y verás que obtener todos los tableros devuelve un tablero. Y un tablero tiene un montón de cosas. Esta es una lista más grande de lo que estaba preparado. Pero permíteme ayudarte. También puedes hacer esto. Así que ahora el tablero es una ID. Un tablero es ahora un objeto. Y estamos devolviendo un objeto con tableros. Y los tableros son un array de información del tablero. Así que verás aquí que el tablero ahora me está fallando porque esto es ahora un <a href="/tags/typescript-libraries">TypeScript</a> notas que esto es un objeto. Si hay alguien que no esté familiarizado con <a href="/tags/typescript-libraries">TypeScript</a> y no sepa lo que estoy haciendo aquí, por favor, hágamelo saber. Supusimos que la gente está usando <a href="/tags/typescript-libraries">TypeScript</a> que es el de facto pero eso ha sido nuestro error. Así que por favor, háganme saber si necesito explicar algo sobre esto. Ahora puedo usar board.name. Y mi aplicación seguirá mostrando el nombre. Lo único que he cambiado es que ahora estoy devolviendo toda la información del tablero en lugar de solo el board.name, que era inicialmente. Y ahora lo que necesito hacer es añadir ese enlace del que hablamos, enlace. Y añadir un enlace que vamos a definir por nuestra cuenta. Puedes inventar la ruta como quieras. Así que necesitas crear un nuevo archivo llamado, digamos, ID del tablero. Y luego diseño. así es como funcionaría. Y de esa manera, si vas a localhost 3000 slash cualquier número, este diseño en la lectura sexual que se renderiza. Así que daré a todos un momento para ponerse al día con eso. Y solo un recordatorio rápido de que si usaste tus propias credenciales de la aplicación y Si usaste tus propias credenciales de la aplicación y tu propia cuenta de Miro, querrás crear un tablero o dos bajo la cuenta que estás usando y también el equipo que estás usando. Así que cuando vayas a la página de inicio de nuestra aplicación en el host local y inicialmente verás eso botón de inicio de sesión. Eso te llevará a una pantalla donde realmente seleccionas el equipo de Miro que quieres autorizar y eso determinará qué tableros se muestran. De lo contrario, se mostrará como sin título. Gracias por captar eso, Bennett. Bueno para todos nosotros. No quiero hacer todo, porque es una masterclass y necesitas averiguar cosas un poco por tu cuenta. Pero creo que este es un buen punto de partida para todos. Y supongo que podemos estar de acuerdo en lo mismo, ¿verdad? Así que levanta la mano, si estás en un punto donde puedes navegar a una subruta de un tablero y ese diseño que estos actos generan, Realmente no importa siempre y cuando solo devuelvas algo. Así que digamos que solo voy a ir aquí y decir. um metin no estoy seguro si tu pantalla está como um extra ampliada pero solo veo como tu estructura de archivos en el lado derecho pero no nada en la izquierda solo es como negro Vamos. OK. ¿Y ahora? ¿Esto mejor? Veo exportar función por defecto, página de tablero. Sí. Sí. Interesante. Sí, solo veo una pantalla negra. Todavía, OK, déjame probar otra vista. ¿Y ahora? Ahora las cosas podrían ser un poco pequeñas. ¿Es mejor? ¿Otras personas ven cosas? No sé si hay realmente una forma de ver lo que estoy compartiendo todavía. Parece que. Está bien. Bennett, en Zoom, a veces como si estás en un Mac, tal vez accidentalmente hiciste zoom en la pantalla compartida. ¿Puedes intentar pasar el ratón sobre la parte de la pantalla compartida y ver si es posible hacer zoom out? ok no me dice para hacer zoom out o um en la parte inferior derecha de la pantalla compartida deberías ver como una lupa con como quizás 50 100 esas clases de opciones sí la mía dice 98 ok si haces clic en ajustar a ventana eso oh dios mío ahí vamos gracias impresionante impresionante Genial. Will, eres la persona perfecta con tu experiencia en Zoom y Miro.

Eso también me ha pasado a mí. Así que lo entiendo completamente. Veo que Jacob ya ha terminado con esta parte del ejercicio. Buen trabajo. Entonces Jacob, mientras esperas, lo que puedes hacer de nuevo es mirar la página. Así que no inspeccionar elemento porque esa es la fuente de la página en este punto en el tiempo. Pero realmente como todos hicimos en ver fuente, así ves lo que se renderiza en el servidor. Y verás que las cosas se manejan en el servidor. Por cierto, unas pocas personas se unieron en los últimos minutos. Va a ser difícil que te pongas al día, pero como mejor cosa, voy a estar compartiendo un tablero de Miro que estamos usando en el chat ahora, que también enumera los pasos que estamos siguiendo en esta masterclass, y alguna información de fondo que puedes leer, y la <a href="/tags/documentation">documentation</a> que usamos para crear esta masterclass está toda enlazada allí. Así que necesitarás este tablero de Miro para convertirte en un experto en Componentes del Servidor.

Marco, esto es correcto. Lo que necesitas hacer como parte de esta tarea es cambiar cómo obtenemos los <a href="/tags/data">data</a>. Entonces, si miras esta parte del código, básicamente este bucle for. Así que estamos revisando todos los <a href="/tags/data">data</a> que se devuelven de obtener todos los tableros. Y lo que está en la plantilla es que estamos devolviendo board.name. Pero queremos devolver todo el tablero <a href="/tags/data">data</a> aquí. Andrew, buena pregunta. Andrew pregunta en el chat, ¿cuál es el impacto en el <a href="/tags/performance">performance</a> del servidor cuando estamos usando los Componentes del Servidor de <a href="/tags/react-components">React</a>? Y voy a darte la respuesta más típica de un desarrollador senior ¡depende! Como si tienes un servidor realmente lento entonces el impacto va a ser enorme, ¿verdad? Si vas a tener algo en el borde ya que estás construyendo en <a href="/tags/nextjs">next.js</a>, hay una gran posibilidad de que vayas a estar ejecutando en Vercel y Vercel tiene servicios alrededor del mundo. por lo que el impacto para tus visitantes será realmente pequeño y tu sitio web será mucho más rápido que hacer cosas en el cliente. Pero una gran parte de eso también es cachear cosas e invalidar la caché. Cuando haces cosas en el servidor, <a href="/tags/nextjs">Next.js</a> tiene todo tipo de ayudantes, los cuales te aconsejaría que leas en la documentación para decir cuándo quieres revalidar la caché y cuándo, o con qué frecuencia quieres hacerlo. ¿Quieres hacerlo para cada renderizado, una vez al día, una vez a la semana, una vez por hora? Puedes proporcionar toda esta información a tu aplicación <a href="/tags/nextjs">Next.js</a>. Una pregunta que tengo es que estoy mirando la respuesta del servidor para la página principal aquí, y está diciendo punto, punto, punto cargando en los hijos del diseño. Y asumí que eso incluiría toda la página.tsx, ya sabes, renderizar también. JOHN MUELLER- ¿Estás viendo esto? Sí. Eso no es lo que esperaba. ¿Por qué se rompió aquí? Pero cuando registro en la consola los tableros dentro de eso, se registra en la consola en el servidor. Así que eso. JOHN MUELLER- ¿Rompió mi propia aplicación de alguna manera? Tu Ahrefs está vacío en línea. 64 línea 52 tres 53 oh sí gracias ahí está entonces cuando miras aquí ves cargando todo no puedo escribir más esta es la lista de todas las palabras a las que tienes acceso las obtengo. Mira, solo obtengo el mapa de todos los <a href="/tags/data">data</a>, pero también veo cargando aquí. Oh, pero esto está dentro de una plantilla. Parece. Estaba mirando la respuesta de la red del muelle y eso dice punto, punto, punto cargando, pero tal vez esto es algo diferente. Oh, estás mirando aquí dentro de la pestaña de red. Sí. Sí. Oh, sí, eso tiene sentido. Sí. OK. Veamos. Tenemos a Jacob e Isa que están al día. Así que también haré el trabajo para que las personas que están atascadas puedan seguir, doble cierre. ¿Es posible acercar un poco más? OK. OK. Entonces, tengo un enlace que va a la ID del tablero, y tengo un diseño de Vsx aquí. Y ahora, lo genial es que esto tendrá props. Y si hago console.plog y voy a uno de estos. está mal tuve que crear la página tsx también entonces puedo nombrar este archivo oh sí el diseño es opcional y la página es obligatoria sí buen punto y ahora este logo por supuesto estará en mi <a href="/tags/cli">terminal</a> y está indefinido porque si es así. Entonces lo genial ahora es que ves aquí mi registro. Déjame acercar, la mayoría de la <a href="/tags/cli">terminal</a>. Es que tengo parámetros, que es un objeto que también tiene id del tablero y la id del tablero es exactamente la uh como la barra <a href="/tags/creativity">ux</a> jvm etc y porque llamé a esto abriendo corchetes id del tablero cerrando corchete ese es el nombre de la prop que voy a obtener entonces um lo que puedo hacer aquí es decir decir, y luego esta página. Entonces una cosa que podrías notar ahora es que mi página todavía muestra esta imagen y felicitaciones. Acabas de crear tu primera aplicación de Miro. Y eso es porque eso está en este diseño principal del TSX. Entonces, ves aquí, déjame acercar de nuevo, Estoy en el diseño principal de TSX, como en la raíz de la aplicación carpeta. Ves que tengo este texto de felicitaciones, y acabas de crear tu primera aplicación de Miro. Y luego debajo de eso están los hijos. Así es donde se renderiza mi página, como mi subruta.

Y esto es lo que mencioné antes. Así que puedo poner toda mi navegación principal y cosas dentro del diseño principal de TSX. Y si estoy en la ruta principal, entonces los hijos serán la página principal de TSX. Pero si voy a una ruta más profunda, entonces los hijos serán la página de subruta que el SX o diseño el SX si tiene eso. Entonces, lo que quiero hacer a continuación es ver hasta dónde ha llegado todo el mundo. ¿Hay alguien que esté atascado y necesite ayuda, o todos están luchando solos? Solo tengo una pregunta aleatoria. ¿Es solo la sintaxis de <a href="/tags/nextjs">Next.js</a> para las rutas poner corchetes alrededor? ¿Eso es lo esperado? Sí, exactamente. ¿Con <a href="/tags/nextjs">Next.js</a>? Esto no tiene nada que ver con <a href="/tags/react-components">React</a> o no funcionará con nada más. Bueno, no puedo decir con seguridad que no funcionará con nada más. Pero es algo que <a href="/tags/nextjs">Next.js</a> impulsó. y creo que estaban usando lo mismo incluso antes de que estuvieran usando el enrutador de la aplicación. Así que solo el enrutador de páginas clásico. También tenían esto. Genial, gracias. Y como he estado usando <a href="/tags/react-components">React</a> durante siete u ocho años, creo, y en ese tiempo trabajé en diferentes proyectos con diferentes soluciones de enrutamiento. Y este es, en mi opinión, el más fácil de aprender. Algo así para aquellos que hicieron <a href="/tags/php">PHP</a> o simplemente enrutamiento <a href="/tags/html">HTML</a>, así es básicamente como funciona. Entonces Natasha, gracias por unirte. Estás preguntando cuál es la diferencia entre el enrutador de la aplicación y ahora las páginas en Next? Esa es una pregunta un poco grande para responder de nuevo. Will, si tienes una respuesta corta que puedes dar mientras la gente está respondiendo. Iba a decir que la versión muy corta es que el directorio de la aplicación es nuevo-ish para <a href="/tags/nextjs">Next.js</a>. Es necesario para trabajar con las funcionalidades que estamos manejando hoy. Así que tiene un montón de propiedades especiales que el directorio de páginas no tiene. Así que puedes consultar la documentación sobre eso, que también está en el tablero. Y sobre los próximos pasos. Creo que lo más fácil es revisar esta rama, que es como entonces podrás unirte desde los próximos pasos porque ponerse al día es imposible dentro del tiempo que tenemos, porque tenemos, poco más de media hora. Así que voy a dar a la gente que está esperando ahora el siguiente paso para que puedan continuar, que es hacer que cada elemento sea clickeable para que vayamos a una nueva página que enumera todos los metadatos de ellos. Entonces, lo que puedes hacer con la API de Miro, puedes hablar con la API de Miro de nuevo para obtener toda la información de ese tablero y listar, simplemente crear otra lista desordenada de toda la información que tienes allí. Así que aquí, lo que quieres hacer es crear una lista desordenada y luego necesitarás los <a href="/tags/data">data</a> del tablero .map la edición, y esta carpeta, y no son elementos. Es singular. Y esto se llama elemento, algo de este elemento del tablero. Primero, necesitas atrapar eso de Miro. Entonces, lo que puedes hacer es copiar y pegar esta función get <a href="/tags/data">data</a> que tenemos en nuestra página principal en el sx y luego en lugar de obtener todos los tableros puedes mirar en nuestra documentación para ver qué hay para obtener la información de un tablero. Marco, ¿cómo obtiene la página del tablero los padres como props? Así que estoy en esa página ahora y lo que te mostré es que sí, esto es déjame ver dónde está ese registro todavía lo tengo. déjame rehacer eso para que pueda mostrarte de nuevo. Esto era código pseudo. Así que déjame comentar eso. Así que viste Marco que estoy registrando esta ID, que simplemente viene de la URL en la que estoy aquí. aquí. Así que U-X-J-V-M. U-X-J-V-M. Y eso es porque utilicé esta notación especial de agregar corchetes alrededor del nombre de la carpeta, ID del tablero. Y por eso lo obtienes como una variable en los padres en tu página. Genial. Entonces, si quieres saber más sobre cómo obtener información, del tablero, puedes ir a la documentación. De hecho, estamos utilizando nuestra biblioteca de clientes aquí. Así que eso lo hace aún más fácil. Y compartiré el enlace a esta documentación en el chat. Pero hemos utilizado anteriormente obtener todos los tableros. Pero ahora queremos tener información sobre no los tableros.

pero los <a href="/tags/data">data</a> en un tablero. Sí, esto es lo que estaba buscando. Así que tenemos crear tablero, obtener todos los tableros. Oh, Will, estoy un poco atascado en mi cabeza, en mis propios pensamientos. ¿Recuerdas de memoria, como, los datos del tablero get? Este es el cliente, el cliente de la API. Sí, creo que debería ser simplemente obtener tablero. Sí, es obtener tablero. Oh, obtener tablero. Oh sí, y luego aquí, sí. Y luego necesito pasar un ID, así que vamos a darle este parámetro. Gracias. SW <a href="/tags/debug">debug</a>, eso es sí, eso no existe, sí. ¿Qué es el depurador de trabajadores de superficie, no se supone que debe estar ahí, y eso no es un iterable, es una cosa singular. Es una solicitud de pares fallida. Bueno, vamos a las aplicaciones de ejemplo que tenemos y depuramos estas. Así que olvidé el nombre de esa nota adhesiva. ¿Quizás puedes usar este método del repositorio RSC? CLEMENS TILDEAUXTENSIONS Oh, la cosa que tenemos preparada. MARTIN SPLITTINGLE tal vez puedes usar el que está en el chat aquí. CLEMENS TILDEAUXTENSIONS Sí. Sí, esto es... Usando... Fuente. Util. Elementos. MARTIN SPLITTINGLE Oh, sí, y lo bueno de esto es que muestra algo. Así que hay un esquema de nombres que estamos usando, como con app. y luego los corchetes están en la ID del tablero, diseño, páginas y todo, pero aún puedes crear una función de utilidades, carpeta de utilidades y aún funcionará. Así que si no se adhiere al esquema de nombres de <a href="/tags/nextjs">Next.js</a>, entonces las cosas seguirán funcionando. Oh, este es mi error. Puedes hacer un TSX en un nombre de archivo. Sí, esto es porque cambiamos cómo el CreateMirror app que lanzamos dos horas antes de la masterclass. Esto no es completamente lo mismo, y eso está dentro de estos items.tsx en un cliente de la API de Miro ahora está en su espejo. El evento de construcción grande está obteniendo un fallo en obtener tablero. ¿Es esa la llamada de función correcta? No lo veo mencionado en la documentación. Sí, debería ser. Ves aquí en las ramas preparadas, como que así es como se supone que debe funcionar. ¿Cuál es el fallo que estás obteniendo Jacob? Simplemente dice que la solicitud HTTP falló en async, obtener <a href="/tags/data">data</a> app o página. Así que parece que es realmente la respuesta HTTP del servidor <a href="/tags/nextjs">Next.js</a>. Mm-hmm. JOHN MUELLER SAVITTARESEN VOORDERIJFG Sí, simplemente no veo eso bajo tus métodos en la documentación allí. Así que me preguntaba. No, debería funcionar. Como las ramas que hemos preparado están todas probadas y como esta es nuestra copia de seguridad. Si algo como esto sucede, entonces yo olvidé lo que se suponía que debía hacer a continuación. OK, seguiremos intentándolo. Sí. Rodrigo, gracias por unirte. Y recibirás el enlace a la grabación más tarde para que puedas continuar si quieres. Y gracias por unirte. Que tengas un buen día.

Entonces, en lo que estaba trabajando es en obtener los <a href="/tags/data">data</a> del tablero. Oh sí, eso es un buen punto. Decodificar componentes URI, muy importante. pasando el puerto a fetch items pero ¿por qué está obteniendo ese enlace? hagamos esto relativamente ahí está, lo arreglé entonces, y solo para reiterar en lo que tengo ahora tengo una lista de toda la información, todos los elementos que están en este tablero, así que <a href="/tags/creativity">ux</a> jv Y sí, listo su tipo y su texto si tienen alguno. Y entonces, larga lista de elementos en este tablero. Pero sí, será diferente para el tablero de todos, por supuesto. Así que mantendré esto abierto.

¿Dónde podemos ver que usas Miro en una aplicación del mundo real? Entonces, si vas al mercado de miro.com, estas son todas las aplicaciones, y algunas de ellas están usando Create Miro app, algunas no. Pero digamos, por ejemplo, creo que un traductor fácil usa Miro app. Sí, este es Hookshot. Entonces, esta es una de las aplicaciones que está usando CreateMiro app. Pero no tenemos forma de saber si alguien envía algo a nuestro mercado que lo estaba usando. Todo lo que sabemos es que alguien usó CreateMiro app, y eso es todo lo que sabemos. no tenemos acceso a su código fuente, porque eso da un mundo entero de, como dije, problemas de derechos de autor en los que no queremos meternos. Solo proporcionamos herramientas para que las personas puedan comenzar un poco antes, más rápido que escribir todo desde cero por su cuenta. Gracias, Jacob, por unirte. Que tengas un buen día. Y de nuevo, puedes ver la grabación más tarde. Así que déjame subir también este. Vale. Por el bien del tiempo, voy a continuar porque solo nos quedan 15 minutos o 17 minutos. Y voy a continuar con el siguiente paso de la masterclass. Vamos a agregar un componente de carga. Entonces hablamos de esto que puedes agregar una carga a TSX y en cualquier momento que estemos esperando un componente del servidor, sí, esta carga ya está esperando una respuesta del servidor se va a mostrar. Entonces, lo que puedo hacer es, tengo este loading.tsx y simplemente lo voy a duplicar, lo duplico dentro de la carpeta de ID del tablero. Y, sí, lo estoy haciendo. Voy a diferenciar entre cargar la aplicación principal y cargar la información del tablero. info. Y para hacer enrutamiento del lado del cliente, necesito agregar un enlace de retroceso. Está mostrando la carga de información del tablero. Y si vuelvo a casa, está cargando la aplicación principal. ¿Ves? Entonces, solo creando estos dos archivos loading.tsx, puedo crear cargadores separados que en realidad se van a mostrar en su lugar. Entonces, si ahora hago navegación del lado del cliente de vuelta a uno de estos tableros. Entonces un tablero de ajedrez. Solo porque el apellido de Will es Bill Bishop. Entonces ves que esta carga se coloca dentro de, como, estamos renderizando layout.tsx, y eso tiene hijos, que debería ser la página de Board ID. Pero como Board ID todavía se está cargando, está mostrando Cargando Información del Tablero. Y de nuevo, por el bien del tiempo, yo simplemente voy a continuar, y dejar que todos continúen los ejercicios a su propio ritmo. De lo contrario, no podemos llegar a todo el material de la masterclass, lo cual sería una lástima. Y luego podemos agregar también un error.tsx. Entonces, lo que voy a hacer de nuevo es crear un error.tsx. Entonces, esto es por qué amo <a href="/tags/typescript-libraries">TypeScript</a>. Acabo de recibir un mensaje de <a href="/tags/typescript-libraries">TypeScript</a> de que una página de error necesita ser un componente del cliente, porque siempre se ejecuta en el cliente, porque me está diciendo algo que está mal en el servidor. Eso todavía se está cargando. Pero esto es básicamente todo. Entonces, ahora si algo sale mal en mi servidor, entonces esta página se mostrará. Y lo genial es, la página principal. Puedo, de nuevo, duplicar este archivo dentro del ID del tablero. Y luego algo salió mal en la página del tablero. Y de esa manera puedes tener más información para tus visitantes de que si algo salió mal aquí, aquí, o aquí, y también durante el desarrollo, te dice mucho más. Entonces, si agregas páginas de error, rutas, carpetas en tu aplicación para cada ruta que tienes, te dice mucho más durante el desarrollo también. Y puedes proporcionar comentarios más accionables a tus usuarios. Entonces digamos que estamos construyendo este sitio web de noticias. Puedes decir que algo salió mal al hablar con los servidores que estamos usando para comentarios si algo salió mal, bueno, creo que captas la idea, ¿verdad? Puedes simplemente decirles qué salió mal más específicamente de una manera realmente fácil. Y eso es toda la masterclass que tenemos. Entonces, estos son todos los conceptos básicos para el enrutamiento dentro de <a href="/tags/nextjs">Next.js</a> con Server Components. Y de nuevo, lo genial es que esto se renderizará en el servidor cuando sea posible porque es asíncrono.

En este caso, es beneficioso. Esto es una gran llamada a la API. Así que queremos que sea un poco más rápido. Por eso se renderiza en el cliente. Pero ves que muchos de los <a href="/tags/data">data</a> llegan mucho más rápido. Y todo lo que es asíncrono, lo renderizamos en el servidor. Adelante. Muy bien. Ahora, para todos los que no están al día, pueden consultar esta rama de hitos. Y luego nos quedan unos minutos para hablar de las acciones del servidor, que se lanzaron, creo que hace solo dos semanas. Antes de eso era inestable y no estaba listo para su uso en producción, pero ahora puedes usarlo. Tengo que decir, fue un concepto un poco extraño para mí cuando leí por primera vez sobre esto, y miré algunas presentaciones sobre cómo funcionan. Pero en realidad, cualquiera que haya hecho sitios web en <a href="/tags/html">HTML</a> o <a href="/tags/php">PHP</a>, podría estar pensando, oh, he hecho esto antes. Básicamente, lo que quiero hacer es mostrarte cómo funciona. si tienes un formulario en tu sitio web, que supongo que tienes, puedes agregar una acción a adiós, gracias jay, puedes agregar una propiedad de acción que es solo <a href="/tags/html">html</a> y como en el mundo tradicional, tu acción apuntaría a una url donde, digamos con <a href="/tags/php">PHP</a>, manejas toda la entrada del cuatro. Pero ahora lo que podemos hacer, como ves, tengo la acción crear ítem, que se ejecuta en enviar. Entonces, cuando el usuario hace clic en el botón de enviar, se ejecuta este crear ítem. Y esto será manejado. También, si tu usuario no tiene <a href="/tags/javascript">JavaScript</a> habilitado, entonces porque tenemos este uso directiva del servidor aquí, todavía funcionará incluso en el servidor. Una vez más, estás escribiendo <a href="/tags/javascript">JavaScript</a>. <a href="/tags/javascript">JavaScript</a> es una pronunciación holandesa, <a href="/tags/javascript">JavaScript</a>. script. Pero puedes simplemente escribir, usar servidor dentro de tu acción, y todavía se ejecutará en el servidor. Es realmente genial, y todavía tengo que hacer una <a href="/tags/deep-dive">deep dive</a> en cómo esto realmente funciona. Quiero tomarme el tiempo para leer la fuente de esto, porque esto abre un todo nuevo mundo de <a href="/tags/accessibility">accessibility</a>. Hay personas que tienen <a href="/tags/javascript">JavaScript</a> deshabilitado. Están fuera Y sí, esto facilita mucho la atención a ellos. Tu formulario completo simplemente funcionará, puedes tener como los <a href="/tags/data">data</a> del formulario que son simplemente, una interfaz <a href="/tags/javascript">JavaScript</a> simple, puedes simplemente trabajar con eso. Consigue como, en este ejemplo, tenemos una entrada de tipo texto y eso proporciona el contenido en nuestro caso para Sticky Notes, y puedo simplemente leer ese contenido porque data.get es simple <a href="/tags/javascript">JavaScript</a> nada sofisticado aquí, nada relacionado con Miro esto es simplemente cómo funciona en <a href="/tags/javascript">JavaScript</a> así que desafortunadamente no tenemos actual en realidad tenemos tiempo para hacer esto pero ya pensamos en eso cuando diseñamos esta masterclass que dos horas podrían no ser suficientes para entrar en esto pero queríamos mencionarlo Así que realmente te aconsejaría que leas la <a href="/tags/documentation">documentation</a> sobre esto y repases estos pasos, para que obtengas la experiencia de cómo es trabajar con acciones de servidor, que son súper, súper agradables. Una mención honorable es para usar optimista. Entonces puedes usar la renderización optimista. Entonces, si estás esperando que tu formulario responda, ya puedes decir, como, espero esta respuesta y renderizar tu página como si esa respuesta estuviera allí, pero volver a renderizarla si la respuesta de tu servidor es diferente de lo que esperabas que fuera. Y eso hace que realmente, tu sitio web se sienta realmente rápido. El rendimiento percibido aumenta 10 veces. Para hacer eso, hay ejemplos, hay documentaciones. Tenemos algunos fragmentos de código aquí listados en el tablero de Miro que puedes usar. Y si quieres ver el resultado final de eso, puedes simplemente mirar esta rama. Muy bien, hemos llegado a la conclusión de la masterclass. Así que espero que todos hayan aprendido algo hoy y estén tan emocionados como nosotros con los componentes del servidor y esperamos que migren al enrutador de aplicaciones en sus aplicaciones. ¿Hay alguna pregunta? Nos quedan unos minutos. ¿Hay alguna pregunta que pueda responder? Solo quería decir gracias. Realmente disfruté de lo organizado que estaba todo. La presentación se sintió realmente fluida Y poder poner las cosas en marcha fue agradable porque eso no siempre sucede en todas las masterclasses. Entonces, sí, gracias. Gracias a ambos. Esto fue genial. Bueno, gracias por esos comentarios tan positivos. Eso alegra mi día. Sí. Sí, muchas gracias.

Antes de comenzar, solo una breve nota sobre un par de recursos útiles para todos ustedes hoy. Así que hemos compartido una serie de enlaces y recursos en el canal de Discord que está vinculado a este código QR aquí en la pantalla. Además, hoy vamos a usar <a href="/tags/yarn">Yarn</a> como nuestro administrador de paquetes. Así que si no tienes <a href="/tags/yarn">Yarn</a>, te recomiendo que lo instales rápido. Y luego también puedes usar opcionalmente tus propias cuentas de Miro hoy. Les daremos a ustedes como credenciales de demostración si no quieren crear las suyas propias. Pero si quieres usar la aplicación que construimos hoy más tarde, podría ser útil usar tu propia cuenta de Miro, que será solo una parte de lo que hablamos hoy. Así que vamos a empezar. ¿Por qué estamos todos aquí hoy? Bueno, estamos aquí para hablar un poco sobre el uso de componentes de servidor reutilizables en <a href="/tags/nextjs">Next.js</a>. Y en realidad, hablaremos un poco más sobre cosas que no son solo <a href="/tags/react-components">React</a> componentes de servidor. Entraremos en algunas otras capacidades de <a href="/tags/nextjs">Next.js</a> también. Pero este es el tema principal de hoy. Así que somos Will Bishop y Matt Porosinski. Así que hoy, como mencioné, vamos a hablar sobre <a href="/tags/react-components">React</a> Componentes de Servidor. Y antes de que nos ensuciemos las manos, brevemente, ¿qué es exactamente lo que vamos a construir hoy? Bueno, vamos a construir una aplicación XJS donde aprovechamos los <a href="/tags/react-components">React</a> Componentes de Servidor, que ahora son una capacidad incorporada nativa. Y aquí estamos mostrando una diferencia en el tamaño del paquete del lado del cliente cuando usamos un paquete realmente grande como Moments.js versus cuando no lo hacemos. Y notarás que el tamaño del paquete en ambas capturas de pantalla es en realidad el mismo. A pesar del hecho de que estamos usando Moments.js en uno de ellos. Así que esto es para demostrar que realmente puedes optimizar y mejorar el rendimiento de tu aplicación, que es exactamente lo que vamos a mostrarles a todos hoy, y darles las herramientas para crear su propia aplicación y crear sus propios <a href="/tags/react-components">react</a> componentes de servidor una rápida mirada a algunas de las tecnologías que vamos a usar, obviamente vamos a usar <a href="/tags/nextjs">next.js</a> y <a href="/tags/react-components">react</a> componentes de servidor y luego un poco más adelante en la masterclass vamos a profundizar en algunas nuevas capacidades de páginas y diseños y <a href="/tags/nextjs">next.js</a> y esperamos tener tiempo para algunas acciones de servidor también y por supuesto vamos a usar Miro, la plataforma de desarrolladores de Miro, que es donde Metin y yo estamos actualmente empleados. Así que un pequeño hecho divertido que también vamos a usar. Un poco sobre nosotros. Si no nos reconoces por nuestra captura de pantalla de celebridades aquí, somos Will y Metin. Así que mi nombre es Will Bishop. Soy parte de nuestro equipo de relaciones con desarrolladores en Miro. He estado en Miro durante unos dos años, trabajando en todas las cosas API, SDK y más. Y antes Antes de eso, estaba en Zoom trabajando en un papel muy similar ayudando a la gente a construir aplicaciones e integraciones en la plataforma de desarrolladores de Zoom. Y ahora se lo pasaré a Metin para que se presente. Sí. Así que no soy Grace, como dice esta captura de pantalla. Solo soy Metin. Y supongo que la mayoría de ustedes me vieron la semana pasada, ya sea en línea o en Nueva York, donde estaba organizando el evento en vivo. y sí, también trabajo con Will en la plataforma de desarrolladores y miro permitiendo a todos construir plugins para miro y un hecho divertido sobre nuestra plataforma es que solo la semana pasada ganamos los premios del portal de desarrolladores para la mejor experiencia de desarrollador y compartimos ese premio con react.dev así que estamos realmente orgullosos de eso sí por todo el duro trabajo que hemos estado haciendo. Y como la competencia son empresas realmente grandes como incluso Spotify o Zoom, todas estas empresas, también presentan sus portales de desarrolladores. Y sí, estamos realmente contentos con eso. Así que un pequeño hecho divertido aquí para Meton. Sí, así que vamos a usar algo. Así que uno de los beneficios de los <a href="/tags/react-components">React</a> componentes de servidor es que puedes hablar con al servidor en el servidor, y no necesitas hacerlo en tu cliente, y todo se renderiza en el servidor. Y como el servidor de ejemplo con el que vamos a hablar, va a ser el servidor de Miro. Y vamos a estar obteniendo datos de los tableros de Miro. Y vamos a estar usando uno de los paquetes que proporcionamos a los desarrolladores externos. Y sí, hace solo dos horas, decidimos empujar una actualización a ese paquete. y sí pensamos que las cosas estarán bien para esta masterclass así que esperamos que todo esté y de lo contrario todavía podemos usar la versión anterior así que no hay problema si nos perdimos algo sí nos gusta vivir peligrosamente así que los mantendremos a ustedes en sus dedos increíbles así que estamos a punto de sumergirnos y ensuciarnos las manos pero muy rápido para aquellos de ustedes que quizás no estén familiarizados con los <a href="/tags/react-components">React</a> Componentes de Servidor. Solo daré un poco de contexto. Así que durante el último par de años, los <a href="/tags/react-components">React</a> Componentes de Servidor han estado en una fase experimental o alfa. Y solo recientemente llegaron a ser estables en los últimos seis meses a un año, lo cual es realmente emocionante, en realidad, porque significa que todo lo que hablamos hoy en términos de <a href="/tags/react-components">React</a> Componentes de Servidor es algo que puedes usar con confianza en producción, y básicamente empezar a usar inmediatamente desde hoy. Y sí, ¿por qué usamos los Componentes de Servidor de <a href="/tags/react-components">React</a>? ¿cuáles son los beneficios? Bueno, el principal es optimizar el rendimiento de tu aplicación. Manteniendo tu paquete del lado del cliente lo más pequeño posible manteniendo muchas cosas del lado del servidor. Así que con los <a href="/tags/react-components">React</a> Componentes de Servidor, tienes acceso directo a tu base de datos o tu <a href="/tags/backend">backend</a>. Y el equipo de <a href="/tags/nextjs">Next.js</a> ha hecho muchas mejoras realmente útiles para la experiencia del desarrollador para usar los <a href="/tags/react-components">React</a> Componentes de Servidor. Así que fueron un socio temprano con el equipo de <a href="/tags/react-components">React</a>, y han estado nutriendo el desarrollo de los <a href="/tags/react-components">React</a> Componentes de Servidor durante los últimos años en asociación con <a href="/tags/react-components">React</a>.

Esto significa que trabajar con los <a href="/tags/react-components">React</a> Componentes de Servidor en <a href="/tags/nextjs">Next.js</a> es realmente bastante fácil, y tendrás una muestra de eso hoy. Así que hay un par de otras características de las que vamos a hablar más adelante en la masterclass. Algunas de ellas podrían estar todavía en la fase experimental, como las acciones del servidor. Pero hablaremos más sobre eso antes. Así que tenlo en cuenta mientras hablamos de los diferentes tipos de componentes hoy. Muy bien, entonces vamos a empezar con la masterclass. Así que como primer paso para comenzar, voy a empezar con una aplicación de plantilla que ya he iniciado desde mi línea de comandos. Y todos vamos a construir esta misma aplicación en un momento. Pero primero quiero demostrar de primera mano el poder de los <a href="/tags/react-components">React</a> componentes de servidor y mostrarles todos los beneficios de los que acabamos de hablar. Así que después de esto, daremos un paso atrás y caminaremos como grupo, sobre cómo poner en marcha tu propia aplicación. Pero primero voy a ir a mi IDE con mi aplicación <a href="/tags/nextjs">Next.js</a> que tengo abierta, y voy a trabajar principalmente en este proyecto aquí. Así que para empezar, te mostraré cómo puedes usar los <a href="/tags/react-components">React</a> Componentes de Servidor para optimizar tus aplicaciones. Así que para esto, voy a empezar simplemente construyendo mi plantilla aquí, ejecutando Yard build, en mi comando, o en mi <a href="/tags/cli">terminal</a>. Y voy a echar un vistazo rápido al tamaño del paquete del lado del cliente. Así que podemos ver aquí, lo haré un poco más grande si quieres, ups, demasiado grande, que nuestro tamaño de paquete es de unos 83.9 kilobytes. Así que vamos a tomar una captura de pantalla de esto, para que podamos referenciar esto en unos segundos más tarde. Y voy a volver a mi tablero de Miro aquí, y simplemente voy a pegar esto aquí para que no lo perdamos. Así que toma nota del tamaño allí. Y ahora, voy a añadir un paquete bastante grande a mi aplicación. Voy a añadir un momento. Así que simplemente voy a copiar esto, volver a mi aplicación aquí. <a href="/tags/yarn">yarn</a> añadir momento esto sólo tomará un momento jazz oh dios mío bill se burla de mí por esto pero esto fue en realidad su broma que acabo de robar así que tengo que hacerlo uh ahora necesitamos importar momento um así que voy a ir a mi app slash page.tsx que está justo aquí abajo mi <a href="/tags/cli">terminal</a> para que podamos ver esto un poco mejor voy a importar el paquete moment.js. Y luego voy a usar el paquete moment.js para mostrar una fecha y hora para nuestra página de inicio de nuestra aplicación. Así que voy a hacer esto justo en la parte superior de nuestra aplicación de plantilla. Así que voy a poner esto aquí. Pulso guardar. Y luego voy a ejecutar el proyecto. Pero antes de hacerlo, quiero mostrarles a todos la aplicación que tengo en ejecución ahora mismo. justo aquí. Y podemos ver que tenemos esta fecha y hora actual mostrando la hora de la Costa Este basada en los EE.UU. ahora mismo. Y esto está aprovechando el poder de los <a href="/tags/react-components">React</a> componentes de servidor. Resulta que, simplemente cargando nuestro archivo page.tsx, ya estamos aprovechando los Componentes de Servidor de <a href="/tags/react-components">React</a>. Y explicaré esto un poco más en un segundo. Pero primero, quiero comparar el tamaño del paquete de esta página que ahora carga en el elemento de tiempo usando el paquete momentjs, que para aquellos de ustedes que usan momentjs, saben que a veces esto puede ser tan grande como unos 200 kilobytes o algo así. Así que si volvemos a nuestra <a href="/tags/cli">terminal</a> aquí y ejecutamos <a href="/tags/yarn">yarn</a> build de nuevo, ups, <a href="/tags/yarn">yarn</a> build, veamos si el tamaño del paquete ha cambiado en absoluto. Y en realidad no lo ha hecho. Así que podemos ver aquí. Tomaré otra captura de pantalla para nosotros y la compararé con la primera que tomamos. Es exactamente del mismo tamaño en nuestro paquete del lado del cliente, 83.9 kilobytes. Así que sólo para estar seguros podemos volver a nuestra página aquí y podemos inspeccionar el código fuente de la página. Hacer esto un poco más fácil de ver. Y si buscamos tiempo, veremos que la fecha y hora ha sido inyectada aquí mismo en el <a href="/tags/html">HTML</a> primero en el servidor, y luego fue llevado al cliente. Así que el verdadero beneficio aquí es que por defecto, cualquier componente dentro de este directorio de aplicaciones que tenemos en nuestra aplicación <a href="/tags/nextjs">Next.js</a>, se va a renderizar primero en el servidor como un Componente de Servidor <a href="/tags/react-components">React</a>. Este es un ejemplo en nuestro archivo page.tsx de la aplicación, donde importamos este paquete grande, momentjs. Pero como este componente está dentro del directorio de la aplicación, como dije, va a renderizarse primero en el servidor. Y el tamaño del paquete <a href="/tags/frontend">frontend</a> permanecerá intacto, aunque estemos usando momentjs. Podemos ver la conveniencia de usar los <a href="/tags/react-components">React</a> componentes de servidor para mantener nuestras nuestras aplicaciones optimizadas en rendimiento y reducir lo que necesitamos cargar en el lado del cliente. Sin embargo, ¿qué pasa si en lugar de una fecha de renderizado de página estática, quisiéramos mostrar algo dinámico, como el tiempo desde que se renderizó la página? Así que podrías pensar en cosas como, tal vez tienes un blog donde quieres actualizar el contenido dinámicamente, o tal vez quieres mostrar cosas como precios de acciones, algo donde no necesariamente vas a querer renderizarlo primero en el servidor, porque entonces no puedes cambiarlo tan fácilmente. Así que para esto, necesitaríamos un componente del cliente. Y en realidad, podemos mezclar componentes del cliente y del servidor bastante fácilmente y la recomendación del equipo de next js es en realidad usar tantos componentes de servidor como puedas como partes centrales de tu diseño y luego espolvorear componentes del cliente a lo largo de donde podrías necesitar esa interacción del cliente o ese tipo de aspecto dinámico así que este enfoque nos ayuda a mantener el tamaño del paquete del cliente pequeño mientras todavía permitimos esos momentos interactivos donde los necesitamos y esta captura de pantalla aquí es directamente de la siguiente

GST. Todo esto suena bien, pero puede ser un poco confuso en la práctica. Así que vamos a examinarlo más de cerca. Puedes usar Componentes de Cliente dentro del directorio de la aplicación también, pero vas a necesitar ser explícito acerca de esto en tu archivo de componente. Así que esto requiere el uso de la directiva useClient que vemos aquí para asegurar que el archivo se cargará del lado del cliente. Si no incluyes esto y el archivo está en tu directorio de la aplicación, entonces va a ser un Componente de Servidor por defecto. También puedes usar esta directiva useServer, pero eso es opcional, no es necesario si estás trabajando en el directorio de la aplicación. Como puedes ver en el árbol de componentes de ejemplo que tenemos aquí, tenemos nuestros componentes de servidor como nuestros componentes centrales en la parte superior. Y luego tenemos los componentes de cliente, como nuestras hojas, por así decirlo. Y podríamos querer anidar componentes más interactivos como un temporizador o cuenta atrás, cosas que cambiarán dinámicamente. Y esto es exactamente lo que vamos a hacer. Vamos a añadir un componente de cliente a nuestra página para mostrar un ejemplo de este tipo de componente dinámico para complementar los componentes de servidor que ya estamos usando. Pero primero, también quiero señalar que también puedes pasar técnicamente componentes de servidor a componentes de cliente. Así que en el raro caso de que quieras hacer esto, tendrías que pasar el componente de servidor como un hijo. Así que, ya sabes, esto no es necesariamente un caso de uso común, pero en el procedimiento del lado izquierdo, tenemos un ejemplo en la diapositiva donde un componente de servidor se pasa dentro de un componente de cliente y en el componente de cliente, podemos renderizar el componente de servidor, pero no va a poder tener ninguna entrada, por ejemplo. Esta parte del servidor del componente se renderizará antes de que el cliente incluso cargue, lo que significa que no vamos a poder actualizarlo después de la carga. Sólo algo a tener en cuenta, Y es posible, pero no exactamente un caso de uso central necesariamente. Vale. Así que, con eso en mente, vamos a crear un componente de cliente. Y sólo un recordatorio, vamos a repasar la creación de esta aplicación con todos ustedes en un momento. Pero primero, sólo quiero mostrarles cómo los componentes de cliente y servidor pueden convivir en armonía. Así que, voy a copiar este componente, comando C. Voy a volver a mi aplicación de plantilla aquí. Y voy a, dentro de mi carpeta de la aplicación, crear un componente timeDifference.tsx. Así que voy aquí, llamo a esto timeDifference. Pego este fragmento de código. Y luego en layout.tsx, voy a importar este componente timeDifference. Oops. Bien, y luego más abajo en la página, voy a seguir adelante y dentro del <a href="/tags/html">HTML</a> que estamos devolviendo, lo haré básicamente justo en la parte superior aquí. Sólo voy a añadir este componente Countdown. Voy a copiar eso directamente de aquí. Y pulso guardar. Y ahora voy a volver a nuestra aplicación. Y deberíamos ver ahora dos fechas y horas. Vale. Así que nos falta algo aquí. Veamos. Importar diferencia de tiempo. Sí. Is mounted es falso. Entonces, ¿de dónde viene cambiado en el US effect en la línea 23. Entonces, ¿cuál es la dependencia de los use effects? Nada. Veamos, intentemos simplemente reiniciar nuestro servidor y veamos si eso hace alguna diferencia. Sí, inicio. Vale, sí, sólo tuvimos que reiniciar nuestro servidor allí. Así que ahora podemos ver que tenemos este componente de cliente dinámico mostrándose aquí. Y similar a antes, voy a seguir adelante e inspeccionar la fuente de la página aquí. Hacer esto un poco más fácil de ver. Y ahora si buscamos la página renderizada aquí, podemos ver que a diferencia de nuestro componente de servidor, que fue renderizado en el lado del servidor, esto se está actualizando dinámicamente del lado del cliente. Así que en realidad no vemos esa fecha-hora porque está sucediendo después de la carga de la página. Así que todo esto es para mostrarles que, ya sabes, el componente de cliente y el componente de servidor, sirven para diferentes necesidades, pero puedes usarlos juntos para obtener ese tipo de aspecto dinámico de una página que podrías querer sin, ya sabes, usar sólo componentes de cliente.

Y, ya sabes, llevar el tamaño completo de un paquete como Moment.js a tu paquete front-end, lo que va a ralentizar tu aplicación, ralentizar el tiempo de carga de la página, y todo ese tipo de cosas. Así que esto es a nivel alto, realmente el valor de los componentes de servidor de <a href="/tags/react-components">React</a> es que podemos, ya sabes, tener todas estas cosas conviviendo en armonía mientras mantenemos el rendimiento y la optimización como prioridades. Sí, la pregunta de Bennett. Sí, así que sólo estoy tratando de entender completamente. Y así el tamaño del paquete no cambió en este escenario. Estoy un poco retransmitiendo lo que creo que pasó y buscando verificar si estoy en el punto con el seguimiento. Y es porque el componente padre era un componente renderizado en el servidor que permitió que el componente del cliente no impactara en el tamaño del paquete. ¿Estoy entendiendo eso correctamente? Sí. Sí, eso es exactamente correcto. Así que porque tenemos esta separación en nuestra aplicación de componentes de cliente y componentes de servidor, cualquier cosa en este directorio de la aplicación es por defecto un componente de servidor. Y cuando creamos este componente de diferencia de tiempo, tenemos esta directiva use client aquí. Así que realmente estamos dejando saber que no queremos que este sea un componente de servidor, queremos mantener esto como un componente de cliente. Esto no va a afectar el tamaño del paquete. Pero volviendo a este archivo page.dsx, donde estamos usando el paquete moment.js, esto habría afectado el tamaño del paquete, si tuviéramos esa directiva use client en la parte superior, porque estaría trayendo el peso completo de ese paquete moment.js a nuestro front end. Mientras que, al usar un componente de servidor de <a href="/tags/react-components">React</a>, porque estamos en el directorio de la aplicación, este archivo sabe que queremos renderizar esto en el servidor antes de que, ya sabes, carguemos el cliente, si eso tiene sentido. Sí, pero entonces cuando hiciste la diferencia de tiempo, ese era el componente del cliente, ¿verdad? Exactamente, sí. Este es un cliente. Sí. Sí, eso es porque se está actualizando en cada, de la parte superior de mi cabeza, milisegundos. Sí, no puedes hacer eso en el cliente. Y ese todavía no impactó en el tamaño del paquete, aunque, porque la carpeta de la aplicación... No, este sí. ¿Oh, sí? Este sí, sí. Oh, está bien. Sí. Creo que ahí es donde estaba perdiendo la conexión. Así que este sí impacta en el tamaño del paquete. Sí. Sí, esto es sólo para mostrar la diferencia entre renderizar algo en el cliente y el servidor. Son algo similares, ¿verdad? Está mostrando un tiempo, sólo una diferencia de tiempo o la diferencia de tiempo desde la renderización inicial. ¿Y qué es eso? ¿Podemos ver cuál es esa diferencia en términos del tamaño del paquete? Mm-hmm. Sí, podemos ejecutar la construcción aquí. Ejecutar <a href="/tags/yarn">yarn</a> build. Sospecho que esto será muy pequeño porque no es un archivo enorme. Sí, ni siquiera se nota. Sí, sí, muy pequeño. Pero si, por ejemplo, tuviéramos un componente de cliente con otro paquete MPM, del tamaño de moment.js o algo así, entonces eso sería un impacto más significativo que podríamos ver fácilmente. Y la razón por la que no notamos este componente específico de Diferencia de Tiempo es porque la construcción va a minimizar todo y son sólo unos pocos caracteres entonces. Sí, exactamente. Gran pregunta, sin embargo, Bennett. Genial, para seguir aquí, ahora vamos a dar un paso atrás Y vamos a iniciar nuestra propia versión de este tipo de aplicación. Y esto va a ser la base para lo que vamos a hacer más adelante en la masterclass donde Matt y Will nos hablan de algunas páginas y aspectos de enrutamiento de <a href="/tags/nextjs">Next.js</a> y esperamos acciones del servidor si tenemos tiempo. Así que si te encuentras con algún problema, mientras configuramos esta plantilla, simplemente levanta la mano, grita, y nos aseguraremos de que te pongamos en marcha. Así que lo primero que vamos a hacer es si tienes una cuenta de Miro y estás conectado a ella, Eso sería útil ya que vamos a usar el paquete Miro y cam para crear nuestra aplicación <a href="/tags/nextjs">Next.js</a>. Pero si no tienes cuenta de Miro, entonces no te preocupes, puedes usar las credenciales de demostración que tenemos en las siguientes diapositivas. Así que el primer paso para instalar esta plantilla va a ser copiar este fragmento de código y luego vamos a ir a nuestro escritorio y vamos a seguir adelante y simplemente iniciar una nueva aplicación. Así que voy a crear una nueva carpeta para esto y la llamaré aplicación. Vale, así que voy a escribir, react-summit-november. Y voy a pegar esto, copiado del tablero de Miro, hacer esto un poco más grande para todos, presionar enter. Y esto va a usar el paquete MCAT de Miro para iniciar una aplicación <a href="/tags/nextjs">Next.js</a> para nosotros.

Y tiene algunas cosas incorporadas que nos permitirán llamar a la API de Miro como uno de nuestros ejemplos más adelante. Una vez que esto esté creado, veremos este enlace para preconfigurar una aplicación en Miro. Entonces, adelante y haz clic en esto, después de que se cargue, simplemente copiaré esto aquí y lo llevaré a mi navegador. Esto va a tomar todas las cosas que acabamos de llenar desde la línea de comandos y poblará esta aplicación en Miro. Así que voy a hacer clic en Crear Aplicación. Y luego lo que voy a necesitar es simplemente este ID de cliente y secreto de cliente, que nos permitirá llamar a la API REST de Miro más adelante en la masterclass.

Entonces, voy a volver a mi escritorio. Voy a abrir esta aplicación que acabamos de crear, la llevaré a mi IDE. Y podemos ver aquí que tenemos un montón de archivos de plantilla por defecto. Tenemos el directorio de la aplicación del que hablábamos antes. Y tenemos un punto ENB donde vamos a querer introducir nuestras credenciales de Miro. Así que voy a ir adelante y copiar estos Mientras Will está explicando esto, déjame darte un poco de contexto sobre por qué estamos usando la API de Miro. La mayoría de ustedes están pensando, me inscribí para los componentes del servidor, no para una charla publicitaria para la plataforma Miro. Y eso es porque para mostrar una de las cosas que hace que los componentes del servidor sean realmente buenos es que necesitas estar hablando con un servidor. Así que este es el servidor que conocemos de memoria, como la API que conocemos de memoria. eso hace que la masterclass sea más fácil. Sí, exactamente.

Gracias también, Marco. Sí, estamos contentos con esta cantidad de personas porque hace que el grupo sea manejable. Sí. Genial. Gracias también, Sai. Entonces, para entrar en estas últimas cosas. Así que tenemos algunos recursos listados aquí que puedes utilizar si vas a seguir trabajando con los componentes del servidor. Por supuesto, la documentación principal de los componentes del servidor, puedes ir aquí y revisarla. Cómo funcionan estos diseños. Hice mi mejor esfuerzo para explicar esto, pero es un concepto un poco difícil de entender. Así que puedes leer más sobre esto en la documentación. Y en realidad, toda esta masterclass fue diseñada a partir de la lectura de la documentación. Así que simplemente tomamos el tiempo para ti y lo convertimos en un bonito <a href="/tags/video">video</a>. Pero solo hemos estado leyendo la documentación. Así que un gran reconocimiento al equipo de documentación de <a href="/tags/nextjs">Next.js</a>, gran trabajo. Las Acciones del Servidor, realmente vale la pena revisarlas y usarlas en tu nueva aplicación. Y luego, por supuesto, la documentación para desarrolladores de Miro. Si estás interesado en continuar como crear un pequeño plugin que aparece aquí dentro de un tablero de Miro, todo está listado aquí. Create Miro app es la herramienta que utilizamos para iniciar nuestra aplicación. Y que actualizamos valientemente dos horas antes de esta versión. Y si quieres mantenerte en contacto con nosotros, puedes hacerlo en Discord o encontrarnos en Twitter, X, redes sociales, LinkedIn, lo que tengas. Tengo el nombre más fácil de encontrar en Google en el mundo, así que puedes encontrarme en línea. Sí, creo que eso lo concluye. Wils, ¿hubo algunas últimas palabras de tu parte? No, solo, sí, gracias a todos por unirse. Fue genial hacer esto hoy. Muchas gracias. Sí. Y gracias a todos por unirse a <a href="/tags/react-components">React</a> Summit. Espero que hayan disfrutado de esta masterclass tanto como el día presencial para las personas que también estuvieron allí. Y el día remoto. Espero verlos en la próxima edición o la próxima edición en Ámsterdam en junio, que también va a ser increíblemente genial. Gracias a todos por unirse. Que tengan un buen día.

React Summit US

React Summit US 2023

Building Reusable Server Components in NextJS

Construyendo Componentes de Servidor Reutilizables en NextJS

Masterclass sobre cómo construir y utilizar eficazmente los Componentes de Servidor de React en NextJS para optimizar el rendimiento de la aplicación.

La masterclass de hoy se centró en el uso de los Componentes de Servidor de React en Next.js para optimizar el rendimiento de la aplicación. La masterclass cubrió temas como el uso conjunto de componentes de cliente y servidor, el arranque de la aplicación, el uso de la API de Miro, la configuración de las credenciales y la estructura del layout, el trabajo con componentes de layout y de página, la creación de enlaces y layout de tablero, la comprensión del renderizado del servidor y del tablero de Miro, la obtención de datos y el rendimiento del servidor, el trabajo con las rutas de Next.js y los metadatos del tablero, la depuración, la obtención de datos del tablero, el uso de Miro en aplicaciones del mundo real, y la conclusión con recursos útiles.

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

Will Bishop

Mettin Parzinski

JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

JSNation 2024

C3 Dev Festival

Join me at C3 Dev Fest, a contemporary software engineering festival!

Register to win an all-paid trip to Amsterdam. Elevate your career with industry experts and workshops & rock 3 dance stages at the after-party!

C3 Dev Festival 2024

React Summit

I am attending the biggest #Reactjs conference remotely. You may get a limited free ticket (50% of talks, no workshops) and join me by clicking this badge.

#react #reactjs

React Summit 2024

TechLead Conference

I'm attending TechLead Conference 2024 – get your free remote ticket and join me there

TechLead Conference 2024

React Advanced

React Advanced Conference 2024

Productivity Conference

Productivity Conference 2024

JSNation US

I’m attending JSNation US. Join me there for free with 10k other JS engineers and 50+ great speakers. Just follow this badge.