El Nuevo Router de Aplicaciones Next.js

Hoy, voy a hacer algo un poco diferente porque mi charla será completamente en VS Code. ¡Woo! Entonces, como ella dijo, soy Lee y trabajo en Vercel y lidero la Next.js comunidad. Si no has oído hablar de Next.js, es un React framework. Y recientemente lanzamos algo llamado el Router de Aplicaciones de Next.js. ¿Alguien ha oído hablar del Router de Aplicaciones? OK, eso es más manos de las que esperaba, eso es genial.

Entonces, para aquellos que no lo han hecho, lo que voy a mostrar hoy es una demostración de cómo se ve el Router de Aplicaciones. Así que la premisa de esta charla se llama Metamorfosis de Next.js. Y el nombre de eso es porque Next.js ha evolucionado mucho a lo largo de los años. Fue lanzado originalmente en 2016 y tenía una forma específica de construcción. Y voy a hablar sobre el viaje a través de una aplicación real de cómo llegamos al Router de Aplicaciones hoy.

Entonces, lo que tengo aquí es mi editor a la izquierda ejecutando una aplicación de Next.js y luego mi navegador. Y lo primero con lo que vamos a empezar es el núcleo de Next.js, que es el enrutamiento. Lanzamos Next.js en 2016. Dijimos que nos encanta el enrutamiento basado en el sistema de archivos. Queríamos hacerlo lo más fácil posible para que empezaras. Solo tienes que soltar un archivo en una carpeta y se creará una nueva ruta. Así que tengo páginas slash index.tsx aquí. Así que si hago export default function home page y digo return React summit y guardo. Vemos React Summit. Esto es todo lo que se necesita para tener tu primera ruta disponible en tu servidor local o en producción y esto es en lo que se basó Next.js hace seis años.

Ahora, lo que vamos a construir hoy es una especie de panel de control de aplicaciones internas que muestra una lista de facturas, tiene algunas páginas de configuración que tienen algunos diseños y vamos a entrar en más algunas de las ventajas de algunas de las cosas nuevas que hemos estado usando. Así que comencemos a esbozar un poco más esta página. Así que en lugar de devolver una cadena aquí, devolvamos algún componente de diseño y veremos si mi VS code no me está dando mis auto-completados útiles, pero eso está bien. Podemos escribir las cosas manualmente. Eso está bien. Haremos import layout para componentes y tengo dos diseños diferentes de aplicación. Tenemos un diseño de inicio así que usaremos ese aquí. Ahí vamos. Bueno, así que tenemos una barra de navegación que se compartirá en toda nuestra aplicación y luego tenemos mis facturas. Así que esta es más o menos la estructura de nuestra página de inicio.

Ahora, dentro de aquí, también queremos tener algunos componentes y mostrar algunas interfaces de usuario. Así que hagamos algunas tarjetas que van a mostrar algunas estadísticas sobre nuestra cuenta, tal vez cuánto dinero hay en nuestra cuenta, cuáles son las facturas y luego también haremos, oh, ahí vamos, está volviendo, está tratando de ayudarme un poco aquí. Componentes slash table, déjame importar manualmente la tarjeta también, import card from components card.

Preparé algunos componentes de UI para que los usemos con anticipación. Tarjetas, tarjetas, bien. Así que tenemos algunas tarjetas que no tienen ningún data ahora. Y luego tenemos una tabla con algunos data estáticos. Así que el núcleo de Next.js está construido en React, te permite componer componentes pero muy frecuentemente necesitas realmente obtener algunos data remotos y pasarlo a tus componentes. Así que la primera API que Next.js lanzó para hacer esto en 2016 se llamaba get initial props. Así que usemos eso para realmente obtener algunos data y ponerlos en la página. Así que diré homepage.getinitialprops y esta va a ser una función asíncrona de la que queremos obtener algunos data. Así que haremos cons data equals await get card data. Y luego vamos a devolver esos data a la página. Así que veamos. No, lo escribiré yo mismo porque oh, ahí vamos. Vale. Desde nuestra biblioteca desde nuestra database, voy a importar esta función get card data que va a devolver algún JSON aquí, vamos a devolver esos data desde esta función, y eso se envía a nuestro componente de React. Así que dentro de nuestro componente de React, tengo props por lo que puedo desestructurar data aquí. Y simplemente lanzaremos algún tipo de any aquí. Me encanta eso. Y luego, en nuestro componente de tarjetas, podemos pasar ese data pasando props. Así que haré data aquí y daré save. Tenemos data en nuestra página. ¡Woo! Me encanta. Esto funciona. Y somos capaces de obtener data remotos, pero viene con algunos compromisos o algunas cosas que tal vez no son obvias. Así que esto se ejecuta en el servidor, pero también se ejecuta en las transiciones de página. Así que esta primera API dejó espacio para mejorar cómo importarías y usarías estas funciones para obtener data remotos. Así que la metamorfosis de esto, la siguiente evolución de esta API fue dividir esto en dos chicos separados. Así que export async function get server side props, y vale, genial.

Copilot me va a ayudar hoy. Veremos si eso funciona. Así que esto es básicamente lo mismo en términos de estructura. Tienes una función asíncrona que va a devolver un objeto. En este caso hay una clave para props. Así que si doy a guardar, también envía el data largo a la página. Pero la diferencia es que esto está marcado explícitamente como get server side. Así que lo hace un poco más claro para los desarrolladores, oye, esto se está ejecutando en el servidor y está enviando esa información a los componentos.

Ahora el contrapunto a esto o la pareja a esto es get static props. Así que tienes la opción de elegir si quieres que tus data sean frescos en cada solicitud, o si quieres pre-renderizar esto durante la construcción y potencialmente actualizarlo incrementalmente más tarde.

Ahora hablemos de algunas de las áreas potenciales de mejora con esto. Digamos que nuestra API es lenta. Y para simular esto simplemente voy a añadir un retraso de dos segundos aquí en get card data y ves nuestro spinner de carga del navegador girar y girar y girar y girar. Ahora cuando estás haciendo esta carga de data de arriba a abajo tienes una obtención de data todo o nada para tu página. O tienes todos tus data o no tienes ninguno. Así que tal vez para hacer esto un poco más dramático iré a about blank y luego volveré a local host y ves esto es lo que tus usuarios están viendo. Esto es lo que tus clientes están viendo. Un spinner de carga y potencialmente una página en blanco. Esa no es una gran experiencia. Idealmente podríamos mostrar algún tipo de indicación visual a nuestros espectadores, ya sea que eso sea tal vez algo como un estado de carga en los componentes. Eso sería bastante agradable. Ahora desafortunadamente una de las áreas de mejora aquí es que no es fácil definir declarativamente tu estado de carga junto a tu componente. Idealmente este componente de tarjeta sabe sobre los data que necesita, sabe cómo cargar y sabe cómo definir su fallback o el estado de carga que estamos mostrando aquí. Ahora la forma en que esto funcionaría en el router de páginas de Next.js es que a menudo tenías que cambiar tu estrategia de obtención de data. Así que en lugar de obtener data en el servidor si quería tener esta co-ubicación de data, UI estados de carga, tendría que obtener data en el lado del cliente o simplemente normal React en el navegador. Y eso funciona pero también puede causar algunas otras compensaciones también. Así que hay algunas oportunidades de mejora aquí de las que vamos a hablar en el router de la aplicación, pero haremos una pausa en esta página y nos moveremos a otra página. Así que en nuestra aplicación, tenemos nuestra página de inicio con algunas facturas, algunas tarjetas y una tabla, pero también tenemos algunas páginas de configuración que se ven ligeramente diferentes y tienen un diferente diseño. Así que vamos a construir esas. Así que voy a hacer un export default function settings page y vamos a devolver algún diseño aquí.

Esto va a ser import layout desde settings layout. Y no necesitas tener todas esas rutas. Veamos si funciona. Prueba. Sí. Podría ser un no recuerdo si es la exportación por defecto o por nombre. Veamos si eso funciona. Sí. ¡Vaya!

Vale. Así que tenemos la misma barra de navegación que se comparte en toda nuestra aplicación y luego tenemos un diseño de página de configuración ligeramente diferente aquí que tiene esta barra superior pero también esta subnavegación para nuestra página. Así que vamos a tener dos páginas diferentes aquí. Vamos a tener una página de perfil para configuraciones y una página de configuración de visualización.

Ahora dentro de aquí, hagamos un formulario. Así que vamos a mostrar cómo enviar algunos data aquí y vamos a hacer esto creando un componente de nombre. Veamos si esto funciona. Nombre no. OK. Biografía, estos van a ser inputs que podemos usar en nuestra aplicación. Quizás un botón. Sí, OK. Y quizás este botón va a recibir algunos hijos porque podemos simplemente reenviar esos hijos a nuestro componente. Y diremos que esto va a ser algo como actualizar perfil, por ejemplo. ¿Lo hará automáticamente? No, no lo hará. OK. Importar nombre, componentes de biografía. Básicamente no recuerdo cuál es la ruta aquí. ¿Cuál es? ¿Componente, está en settings layout? Probablemente lo esté. Es mejor cuando te da automáticamente la importación, eso ayuda un poco. Veamos, tarjetas, minimal, barra de navegación.

¿Dónde está? Está en el diseño de configuración. Mi editor no quiere actualizarse. Veamos si eso funciona. Funciona. Algún día VS Code me ayudará más.

Tengo un input de nombre, un input de biografía, un botón normal que toma algún hijo. Y quiero enviar este formulario. La forma en que la mayoría de ustedes ha estado construyendo aplicaciones de Next.js o React es que usan un manejador de eventos para hacer esto. Vamos a nuestro formulario y decimos, ¿sabes qué? Al enviar queremos llamar a alguna función handle submit. Como seguramente me equivocaría con esto, voy a insertar un fragmento para este porque es mucho código. Y veremos cómo podemos eliminar algo de este código aquí en un segundo.

Tenemos una función handle submit que toma el manejador de eventos. No vamos a recargar la página. Vamos a obtener los valores de los inputs. Y luego vamos a llamar a una ruta de API en Next.js. Esta ruta de API nos permite escribir algo de código de back end, exponer una API si queremos. Tenemos API submit aquí, que reenvía el cuerpo de nuestros dos inputs. Y luego básicamente solo hace eco o devuelve esos valores. Así que de hecho, fui adelante y configuré esta API con anticipación. Básicamente solo está registrando los valores en el servidor. Así que déjame cerrar esto. Guardaré aquí. Y déjame solo subir esto aquí. Y digamos que quiero cambiar esto a React Summit. Presionaré actualizar perfil. Y en la parte inferior izquierda aquí, puedes ver en la salida de mi consola en el servidor, vemos el nombre en la biografía de nuestra ruta de API registrando la información. Así que esto es bastante típico. Necesitas tener este código ejecutándose en el servidor para que puedas conectar de forma segura a tu base de datos o pasar una variable de entorno que tenga una clave secreta. No querrías que esto se ejecute en el navegador y exponga esos valores. Ahora esto funciona, pero viene con algunos compromisos, notablemente que esto requiere que se ejecute JavaScript del lado del cliente, por lo que la historia de mejora progresiva podría ser mejor.

Y también, como puedes ver, hay un poco de código ceremonial aquí. Esa sería la forma amable de decirlo. Hay mucho código extra que necesitas escribir. Y vamos a ver algunas formas en las que podemos reducir gran parte de ese código, y también simplificar el modelo mental, esperemos que un poco también.

Ahora, mientras estamos aquí, también quiero hablar de ese diseño. Notarás que he estado importando este componente que tiene el diseño de nuestra aplicación. Bueno, ¿qué pasa cuando quiero tener otra página que use el mismo diseño? En realidad no voy a escribir esto completamente porque es bastante pequeño. Pero si quiero tener esta página de visualización que también está en la configuración, vamos a usar... Vamos a usar... Déjame cerrar esto aquí. Así que páginas barra configuración barra visualización. Vamos a usar ese mismo diseño, y va a tomar un componente que voy a llamar modo mínimo. Así que veamos cómo se ve esto. Haré clic en visualización. Tenemos este componente llamado modo mínimo que te permite alternar cuánto data queremos mostrar en nuestra tabla de facturas.

Ahora, lo que te encantaría hacer es reutilizar, ese es el gran poder de React, reutilizar esa tabla componente, el mismo componente de tabla que usamos en la página de inicio. Así que esto funciona. Podemos introducirlo aquí, pero esto viene con otra oportunidad de mejora. Ahora mismo, esta tabla data, si realmente salto a este archivo, esto no es asíncrono, estos son datos estáticos, lo que significa que soy capaz de hacer esto. Pero si de repente, esto era en cambio data igual a data, y necesitaba reenviar algunos datos desde una ubicación remota, eso significaría que esta página necesitaría tener alguna función de carga de datos, un get server-side props, la página de índice necesitaría tener esa misma función de carga de datos. En todas partes donde consumirías ese componente necesitarías pasar esos datos y serializar desde el servidor al cliente. Sería genial si pudiéramos ubicar nuestra obtención de datos con nuestros componentos.

Así que, ahora que tenemos este andamiaje de nuestra aplicación a través de la ruta de índice y la ruta de configuración, veamos cómo podemos hacer algunas de estas cosas un poco más fluidas. Así que, lo que voy a hacer es ir a nuestra ruta de índice. Simplemente copiaré y pegaré todo este código. Y, luego voy a ir a este nuevo directorio de aplicación y tengo una nueva subcarpeta y luego una nueva página de archivo. Así que, la página es esta convención especial que marca una pieza de UI que es enrutada. Así que, voy a pegar nuestro código anterior y vamos a empezar a borrar código. Eso suena divertido. Así que, tomemos esta promesa.

Queremos ir a buscar algunos datos de la tarjeta data. Mantendremos esto. Pero, ¿qué pasaría si eliminamos la API específica de Next.js? ¿Qué pasaría si eliminamos el reenvío de props para serializar esto entre aquí y en lugar de simplemente dijéramos, ¿sabes qué? Esta es una función asíncrona y vamos a obtener algunos datos data en ella. Bueno, eso parece bastante simple, ¿no es así? Así que, déjame guardar aquí y luego iré a locos3000 slash new y veremos, déjame recargar la página aquí. Oh, tengo el estado de carga. Me desconcertó un poco. Y me preguntaba, ¿está cargando? Vemos exactamente lo mismo que vimos antes, que es que tenemos datos data mostrados en nuestras tarjetas.

Ahora, para el buen observador, podrías estar preguntándote por qué hay dos barras de navegación. Y la razón de eso es porque ese estado es compartido entre todas las rutas. Ese diseño es la pieza global a lo largo de nuestra aplicación. Ahora, afortunadamente en el Router de la Aplicación, hay una nueva forma o una nueva convención que te permite definir tus diseños a través del sistema de archivos. Así que el diseño de ruta para nuestra aplicación, está importando nuestros estilos globales, y está utilizando esa barra de navegación, que es la parte que se comparte a lo largo de la aplicación. Así que lo que eso significa es que este diseño puede ser la parte que sólo se comparte para la página de inicio. Así que, ¿sabes qué? Deshagámonos de esta barra de navegación. Ya no la necesitamos. OK. Así que eso simplificó un poco las cosas.

Pero, ¿qué pasa con ese problema que mencioné acerca de si los datos data son lentos, todavía existe? Y la respuesta es sí, ese problema todavía existe, porque ahora tienes la flexibilidad y la opcionalidad de elegir cómo quieres manejar esto. Así que digamos, ¿sabes qué? En realidad queremos transmitir datos data fuera de orden. Esta tarjeta UI, sabemos que esta API o esta llamada a la base de datos database podría ser un poco lenta. No queremos bloquear la renderización de la página mientras esperamos que estos datos data lleguen. En cambio, queremos presentar al usuario un estado de carga. Así que, ¿sabes qué? Eliminemos esto, y eliminemos esto, eliminaremos esto, también eliminaremos esto. Y vamos a hacer la obtención de datos data ubicada con nuestro componente de tarjetas. Así que entraré aquí y marcaremos esto como una función asíncrona. Este es un componente de servidor React. Y luego diré, ¿sabes qué? Si pasamos la prop lenta de true, entonces vamos a buscar nuestros datos de la tarjeta data, y vamos a tener este retraso aquí. Así que ahora, de vuelta en nuestra ruta de índice principal, definamos de manera declarativa cómo queremos que se vea el estado de carga. Así que voy a tomar esto y lo vamos a envolver en React suspense, y vamos a lanzar la prop lenta aquí, y luego vamos a definir un estado de reserva de cómo queremos que se vea la carga, y eso va a ser tarjetas cargando. Así que guardaré aquí.

Y ahora, cuando recargo la página, en realidad para un efecto dramático, el efecto dramático es divertido. Iré a about blank, localhost new. Vemos instantáneamente la UI, los data que son lentos llegan a fluir fuera de orden, y se ubican con el componente. Así que mantienes los data cerca de donde la UI se está renderizando realmente. Eso es una gran mejora. Creo que es mucho más agradable trabajar con eso. Así que ese es un problema resuelto.

Intentaré ir rápido aquí. El segundo es la página de perfil o la página de configuración. Permíteme volver aquí. Copiaré y pegaré este código en la nueva página, y veamos cómo podemos refactorizar esto de la forma anterior a una nueva forma en el router de la aplicación. Así que como mencioné, una de las oportunidades de mejora es que hay mucho código de ceremonia. ¿Qué pasaría si no tuviéramos que hacer un fetch a una API separada? ¿Y qué pasaría si en lugar de eso pudiéramos ejecutar este componente completamente en el servidor como un componente de servidor? Bueno, no podríamos usar un manejador de eventos. Necesitamos algo nuevo. Y con la introducción de las acciones del servidor de React y la integración en el router de la aplicación de Next.js con la capa de almacenamiento en caché y revalidación, hicimos posible que puedas hacer algo como esto.

Quiero tener una acción en mi formulario, y en realidad voy a denotar este botón como un tipo de envío porque está utilizando el formulario de HTML aquí. Está utilizando un botón con tipo de envío. Y esta acción va a tomar una función. Esto podría ser como guardar en db o algo así. Ahora, en lugar de eso, lo que podemos hacer aquí, vamos a deshacernos de esto completamente, en realidad, porque no necesitamos un manejador de eventos. Vamos a tener una función asíncrona guardar en db. Copilot está muy equivocado aquí. Necesita aprender cómo funciona esto todavía. Y va a tomar no de data, sino de data del formulario, que utiliza el data del formulario web aquí. Y esta función se va a ejecutar en el servidor. Así que la forma en que denotamos esto como una acción del servidor es a través de la directiva use server. Si puedo escribir, ahí vamos. Y luego podemos obtener los data del data del formulario, el nombre, y la biografía. Y luego simplemente vamos a registrar estos en el console aquí. Eso me parece correcto.

Bueno, nuevo slash configuraciones slash perfil. ¡Pero vaya! ¿Qué está pasando aquí? Tenemos la inception de diseños. ¿Qué es esto? Como mostramos en la página de inicio, hay una oportunidad para mejorar cómo manejamos los diseños. Así que mencioné que había una parte de nuestro diseño que se compartía entre la página de inicio y las páginas de configuración. Vamos a refactorizar eso en los diseños del sistema de archivos. Y para hacer eso, ves que tenemos un nuevo diseño anidado en el router de la aplicación, y esto está tomando ese componente de diseño de configuración que se comparte entre las dos rutas. Así que hemos movido ese estado hacia arriba, y críticamente, este componente no se volverá a renderizar. Así que si queríamos tener estado aquí, cuando hacemos la transición entre páginas, como un interruptor o algo así, eso no se restablecería. Ahora, eso no está en la demostración, pero es bueno saberlo. Así que si vuelvo aquí, en realidad no necesito esto en absoluto porque se ha elevado al archivo de diseño, así que puedo eliminar eso por completo. Y estamos avanzando, pero todavía tenemos la doble barra de navegación, así que queremos ir a aquí y decir, ¿sabes qué? Para el diseño de configuración, ya no necesitamos esto. Boom. Adiós. Ahí está nuestra nueva característica, doble barra de navegación. OK. Eso se ve bien.

Ahora, el momento de la verdad. ¿Funciona esta función simplificada, esta acción de servidor donde simplemente llamo a una función directamente, no tengo que hacer una ruta de API separada, funciona esto? Espero que sí. Funciona. ¡Woo! Genial. No sé ustedes, pero ese código me parece mucho más divertido de escribir. Así que definitivamente hay una mejora allí. Lo último que mencionaré antes de pasar a QA es solo para mencionar que la página de visualización y nuestra página de configuración también pueden aprovechar la elevación y reutilización del diseño compartido entre las dos rutas. Y porque el router de la aplicación está construido en react componentes de servidor, ahora podríamos co-localizar data con UI. Si queríamos esta tabla, por ejemplo, queríamos decir, sabes qué, en realidad, esto va a ser una función asíncrona. Vamos a esperar obtener algunos data. Esto se va a ejecutar y almacenar en caché esos data, almacenar en caché esa búsqueda como estática por defecto, lo que significa que esto funciona ya sea que despliegues a un servidor Node.js, despliegues a algún lugar como Vercel, o incluso lo exportes como un conjunto de archivos HTML y JavaScript, porque esto puede ser almacenado en caché y pre-renderizado durante la construcción. Ahora, digamos que quieres aprovechar algunas características del servidor. Tal vez queremos esta lista de facturas, y no se actualiza muy a menudo. Tal vez se actualice cada 60 segundos.

Bueno, todavía podemos almacenar eso en estático data por defecto, pero entonces quizás decimos, sabes qué, export const revalidate 60 segundos. Así que queremos que este segmento de ruta o este componente se actualice cada 60 segundos. Eso es todo lo que se necesita para que actualicemos periódicamente esos data como máximo cada 60 segundos.

Así que sé que pasé por alto muchas cosas aquí. Hay mucho más que podría cubrir, incluso hablar de cómo funcionan los componentes del cliente. Así que digamos que tal vez este interruptor de modo mínimo, queríamos tener algún estado. Solo voy a mostrar eso también, ya que estoy aquí. Digamos que queríamos tener data y establecer data o algo así. Queremos tener un estado usado, algo así en nuestro modo mínimo para este interruptor. Bueno, esto va a mostrar un error. Bueno, no puede encontrar el estado usado, eso tiene sentido. Pero déjame importarlo aquí. Y ahora lo que queremos hacer aquí para poder usar el estado usado, diríamos, sabes qué, para tener un componente interactivo en el lado del cliente, tenemos una separación mucho más clara entre lo que se ejecuta en el servidor y lo que se ejecuta en el cliente. Así que vamos a marcar esto explícitamente con la directiva used client para decir que este componente tiene acceso a usar cualquier hook de React en el ecosistema, hooks incorporados como used state o used effect. Así que ahora, esperemos, el código es más claro, qué código tiene la capacidad de ejecutarse también en el cliente, y qué código se ejecuta solo en el servidor. Así que esto fue una rápida revisión del Router de la App. Espero que esto te haya dado una mejor visión general de algunas de las nuevas características en las que estamos trabajando en Next.js. El truco final aquí es que todo esto funciona en la misma aplicación Next.js. Todas las APIs en las que hemos trabajado y utilizado desde el primer día, get initial props, todo lo que hemos construido desde el principio, todo esto puede coexistir en una aplicación y vivir armoniosamente juntos. Así que puedes mantener tu router de páginas, que está funcionando genial en producción hoy, y luego adoptar incrementalmente el Router de la App cuando tú o tu equipo estén listos y probar algunas de estas cosas nuevas.

Así que gracias a todos por escuchar mi charla y lo aprecio. Como el Router de la App es estable ahora, ¿deberíamos alejarnos de las páginas lo antes posible o seguirá siendo mantenido a largo plazo? Sí, buena pregunta. Espero que el objetivo de mi charla fuera mostrar que está diseñado para que estos puedan vivir juntos. Así que no necesariamente tienes que pasar de las páginas al Router de la App hoy. Aunque el núcleo es estable, todavía va a haber errores y cosas en las que estamos trabajando. Y realmente apreciamos a todos los que dan retroalimentación y prueban cosas mientras movemos el núcleo a estable. Diría que adoptes cosas cuando te sientas listo para tu equipo pero no deberías sentirte presionado a moverte. Ambos pueden continuar viviendo y el router de páginas seguirá siendo soportado. Incluso estamos añadiendo algunas características nuevas allí también. Así que definitivamente va a seguir siendo mantenido.

Genial. Asombroso. Eso es una gran noticia. Sí. Muchos votos para ¿cuándo estará disponible la obtención de data en SSR para el diseño? Por ejemplo, obtención y navegación para un diseño compartido. Sí. Así que lo grandioso de los React Server Components, la base de lo que hemos construido en el Router de la App es que todos los ejemplos que mostré hoy estaban obteniendo data dentro de la página. Pero si quisiéramos, podríamos elevar eso al diseño. Y por ejemplo, tenía ese componente de diseño para nuestras páginas de configuración. Digamos que necesitamos obtener alguna información del usuario y compartirla en una barra de navegación entre todas las páginas, en realidad aún puedes hacer eso. Puedes marcar el diseño como asíncrono. Puedes esperar a que se obtenga algún data. Y eso no era posible antes en la ruta de las páginas. No había obtención de data en el nivel superior. Y no sería una conferencia de desarrolladores sin preguntarte acerca de tu configuración. Sí. Porque mucha gente quería saber cómo hiciste que tu cursor fuera tan suave. Sí. Así que este es el consejo. Este es el consejo del grabador de video de streamer. Hay una configuración en VS code que tiene el seguimiento suave del cursor. Y es muy relajante mirarlo. Así que recomendaría activarlo. Sí. Me encanta que eso sea lo más importante... Me alegra que hayamos sacado eso. Esa es la gran conclusión. Bien. Nos hemos quedado sin tiempo para preguntas y respuestas. Muchas gracias, Lee, por tu charla. Puedes encontrar a Lee en la parte de atrás en el stand si tienes más preguntas o simplemente quieres charlar uno a uno. Así que gracias de nuevo. Genial.