El Nuevo Enrutador de Aplicaciones de Next.js

Así que para aquellos que no lo han hecho, lo que voy a hacer hoy es una demostración de cómo se ve el enrutador de aplicaciones. Por lo tanto, 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. Se lanzó originalmente en 2016 y tenía una forma específica de construir. Y voy a hablar sobre el viaje a través de una aplicación real de cómo llegamos al enrutador de aplicaciones hoy.

Lo que tengo aquí es mi editor a la izquierda ejecutando una aplicación 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 que fuera lo más fácil posible para que puedas empezar. Solo tienes que colocar un archivo en una carpeta y creará una nueva ruta. Así que aquí tengo pages/index.tsx. 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 en esto 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 con algunos diseños y entraremos en algunas de las ventajas de las nuevas cosas que hemos estado usando. Así que empecemos a estructurar un poco más esta página. En lugar de devolver una cadena aquí, vamos a devolver un componente de diseño y veremos si mi VS Code no me está dando mis autocompletados útiles, pero está bien. Podemos escribir manualmente las cosas. Está bien. Haremos import layout for components y tengo dos diseños diferentes de la aplicación. Tenemos un diseño de inicio, así que lo usaremos aquí. Ahí vamos. Vale, tenemos una barra de navegación que se compartirá en toda nuestra aplicación y luego tenemos mis facturas. Así que esta es 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 mostrarán algunas estadísticas sobre nuestra cuenta, tal vez cuánto dinero hay en nuestra cuenta, cuáles son las facturas y también haremos, oh, ahí vamos, está volviendo, está tratando de ayudarme un poco aquí. Componentes / tabla, déjame importar manualmente la tarjeta también, importar tarjeta de componentes tarjeta.

He creado algunos componentes de interfaz de usuario para que los usemos con anticipación. Tarjetas, tarjetas, genial. Entonces tenemos algunas tarjetas que no tienen ningún data en este momento. Y luego tenemos una tabla con algunos data estáticos. El núcleo de Next.js está construido sobre React, lo que te permite componer componentes, pero con frecuencia necesitas obtener algunos data remotos y pasarlo a tus componentes. La primera API que Next.js lanzó para hacer esto en 2016 se llamaba getInitialProps. Así que vamos a usar eso para obtener algunos data y ponerlo en la página. Entonces diré homepage.getInitialProps y esto será una función asíncrona de la que queremos obtener algunos data. Así que haremos const data = await getCardData. Y luego vamos a devolver ese data a la página. Así que veamos. No, lo escribiré yo mismo porque, oh, ahí vamos. De nuestra biblioteca, de nuestra database, voy a importar esta función getCardData que va a devolver algún JSON aquí, vamos a devolver ese data desde esta función, y eso se pasa a nuestro componente React. Así que dentro de nuestro componente React, tengo props para que pueda desestructurar el data aquí. Y simplemente agregaremos algún tipo any aquí. Me encanta eso. Y luego, debajo en nuestro componente de tarjetas, podemos pasar adelante ese data pasando props. Así que haré data aquí y guardaré. Tenemos data en nuestra página. ¡Woo! Me encanta. Esto funciona. Y podemos obtener datos remotos, pero tiene algunas compensaciones o algunas cosas que tal vez no sean obvias. Esto se ejecuta en el servidor, pero también se ejecuta en las transiciones de página. Entonces, esta primera API dejó margen de mejora para aclarar cómo importar y usar estas funciones para obtener datos remotos. Así que la metamorfosis de esto, la siguiente evolución de esta API fue dividirla en dos funciones separadas. Así que exportemos la función asíncrona getServerSideProps, y genial.

Copilot me ayudará hoy. Veremos si funciona. Así que básicamente es lo mismo en cuanto a la estructura. Tienes una función asíncrona que devolverá un objeto. En este caso, hay una clave para props. Así que si guardo, también reenvía los datos a la página. Pero la diferencia es que esto está marcado explícitamente como obtener en el lado del servidor. Por lo tanto, queda más claro para los desarrolladores que esto se ejecuta en el servidor y reenvía esa información a los componentes.

Ahora, la contraparte de esto es obtener props estáticos. Por lo tanto, tienes la opción de elegir si quieres que tus datos sean frescos en cada solicitud, o si quieres pre-renderizarlos durante la construcción y actualizarlos incrementalmente más tarde.

Ahora hablemos de algunas áreas potenciales de mejora con esto. Digamos que nuestra API es lenta. Y para simular esto, agregaré un retraso de dos segundos aquí en obtener datos de la tarjeta y verás cómo el spinner de carga de nuestro navegador gira y gira y gira y gira. Ahora, cuando haces esta carga de datos de arriba hacia abajo, tienes todo o nada en la obtención de datos para tu página. O tienes todos tus datos o no tienes ninguno. Entonces, tal vez para hacer esto un poco más dramático, iré a about blank y luego volveré a localhost y verás 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 algo como un estado de carga en los componentes. Eso sería agradable. Desafortunadamente, una de las áreas de mejora aquí es que no es fácil definir de manera declarativa tu estado de carga junto a tu componente. Idealmente, este componente de tarjeta sabe sobre los datos que necesita, sabe cómo cargarlos 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 enrutador de páginas de Next.js es que a menudo tenías que cambiar tu estrategia de obtención de datos. Así que en lugar de obtener datos en el servidor si quería tener esta co-ubicación de datos, estados de carga de la interfaz de usuario, tendría que obtener datos en el lado del cliente o simplemente en React normal en el navegador. Y eso funciona, pero también puede tener algunas otras compensaciones. Por lo tanto, hay algunas oportunidades de mejora aquí de las que hablaremos en el enrutador de la aplicación, pero pausaremos en esta página y pasaremos a otra página. Entonces, 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 diseño diferente. Así que las construiremos. Así que hagamos una exportación predeterminada de la función página de configuración y vamos a devolver un diseño aquí.

Esto va a ser importar el diseño desde el diseño de configuración. Y tengo el no necesitas tener todas esas rutas. Veamos si funciona. Prueba. Sí. Podría ser un no recuerdo si es el predeterminado o nombre para exportar. Veamos si eso funciona. Sí. ¡Guau!

De acuerdo. 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 la configuración y una página de configuración de visualización.

Ahora, dentro de aquí, hagamos un formulario. Vamos a mostrar cómo enviar algunos data aquí y lo haremos creando un componente de nombre. Veamos, tal vez bueno, veamos si esto funciona. Nombre no. De acuerdo. Biografía, estos serán solo inputs que podemos usar en nuestra aplicación. Tal vez un botón. Sí, de acuerdo. Y tal vez este botón va a contener elementos secundarios porque podemos simplemente reenviar ese hijo a nuestro componente. Y diremos que esto va a ser algo como actualizar perfil, por ejemplo. ¿Lo hará automáticamente? No, no lo hará. De acuerdo. Importar componentes de nombre y biografía. Básicamente no recuerdo cuál es la ruta aquí. ¿Cuál es? Componente, ¿está en el diseño de configuración? Probablemente sí. Es mejor cuando te da automáticamente la importación, eso ayuda un poco. Veamos, tarjetas, mínimas, 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 campo de entrada para el nombre, un campo de entrada para la biografía, un botón normal que recibe un hijo. Y quiero enviar este formulario. La forma en que la mayoría de ustedes ha estado construyendo aplicaciones Next.js o React es utilizando un controlador de eventos para hacer esto. Vamos a nuestro formulario y decimos, sabes qué, en el envío queremos llamar a una función handle submit. Debido a que definitivamente cometería un error tipográfico, voy a insertar un fragmento de código para esto porque es mucho código. Y veremos cómo podemos eliminar parte de este código en un segundo.

Tenemos una función handle submit que recibe el controlador de eventos. No vamos a recargar la página. Vamos a obtener los valores de los campos de entrada. Y luego vamos a llamar a una ruta de API en Next.js. Esta ruta de API nos permite escribir código backend, exponer una API si queremos. Tenemos aquí una API submit, que envía el cuerpo de nuestros dos campos de entrada. Y básicamente solo muestra o devuelve esos valores. Así que en realidad ya configuré esta API de antemano. Básicamente, solo imprime los valores en la consola del servidor. Así que déjame cerrar esto. Guardaré aquí. Y déjame abrir 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 la consola en el servidor, vemos el nombre y la biografía de nuestra ruta de API mostrando la información. Esto es bastante típico. Necesitas tener este código ejecutándose en el servidor para poder conectarte 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 tiene algunos compromisos, especialmente que esto requiere que se ejecute JavaScript en el 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 ceremonioso aquí. Esa sería la forma amable de decirlo. Hay mucho código adicional que necesitas escribir. Y veremos algunas formas en las que podemos reducir gran parte de ese código y también simplificar el modelo mental, con suerte, un poco también.

Ahora, mientras estamos aquí, también quiero hablar sobre ese diseño. Te habrás dado cuenta de 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 lo escribiré 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... Permíteme cerrar esto aquí. Entonces, páginas / configuración / visualización. Vamos a usar ese mismo diseño, y va a recibir un componente que voy a llamar modo mínimo. Veamos cómo se ve esto. Haré clic en visualización. Tenemos este componente llamado modo mínimo que te permite alternar cuántos 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 ese componente de tabla, el mismo componente de tabla que usamos en la página de inicio. Así que esto funciona. Podemos ingresarlo aquí, pero esto viene con otra oportunidad de mejora. En este momento, esta tabla data, si realmente entro en este archivo, esto no es asíncrono, esto es data estático, lo que significa que en realidad puedo hacer esto. Pero si de repente, esto fuera en cambio data igual a data, y necesitara enviar desde una ubicación remota algún data, eso significaría que esta página necesitaría tener alguna función de carga de data, un get server-side props, la página de índice necesitaría tener esa misma función de carga de data. En cualquier lugar donde consumas ese componente, necesitarías pasar ese data y serializar desde el servidor al cliente. Sería genial si pudiéramos colocar nuestro código de obtención de data junto con nuestros componentes.

Ahora que tenemos esta estructura de nuestra aplicación en la ruta de índice y la ruta de configuración, veamos cómo podemos hacer que algunas de estas cosas sean un poco más fluidas. Entonces, lo que voy a hacer es ir a nuestra ruta de índice. Simplemente copiaré y pegaré todo este código. Y luego iré a este nuevo directorio de la aplicación y tengo una nueva subcarpeta y luego un nuevo archivo de página. Entonces, la página es esta convención especial que marca una pieza de interfaz de usuario que es enrutada. Pegaré nuestro código anteriormente y comencemos a eliminar código. Eso suena divertido. Entonces, eliminemos esta promesa.

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

Ahora, para el ojo entrenado aquí, es posible que te preguntes ¿por qué hay dos barras de navegación? Y la razón de eso es porque ese estado se comparte entre todas las rutas. Ese diseño es la pieza global en toda nuestra aplicación. Afortunadamente, en el App Router, hay una nueva forma o una nueva convención que te permite definir tus diseños a través del sistema de archivos. Entonces, el diseño de ruta para nuestra aplicación importa nuestros estilos globales y utiliza esa barra de navegación, que es la parte que se comparte en toda la aplicación. Lo que eso significa es que este diseño puede ser la parte que solo se comparte para la página de inicio. ¿Sabes qué? Deshagámonos de esa barra de navegación. Ya no la necesitamos. OK. Eso simplificó un poco eso.

Pero ¿qué pasa con ese problema que mencioné sobre si los datos son lentos? ¿Aún existe eso? Y la respuesta es sí, ese problema aún existe, porque ahora tienes la flexibilidad y la opción de elegir cómo quieres manejar esto. Digamos, ¿sabes qué? En realidad queremos transmitir datos desordenados. Esta interfaz de tarjeta, sabemos que esta API o esta llamada a la base de datos puede ser un poco lenta. No queremos bloquear la renderización de la página mientras esperamos a que lleguen estos datos. En su lugar, queremos mostrar al usuario un estado de carga. ¿Sabes qué? Eliminemos esto, y eliminemos esto, eliminaremos esto, eliminaremos esto también. Y vamos a hacer la obtención de datos junto con nuestro componente de tarjetas. Así que entraré aquí y marcaré esto como una función asíncrona. Este es un componente de servidor de React. Y luego diré, ¿sabes qué? Si pasamos la prop slow como true, entonces vamos a obtener nuestros datos de tarjeta, y vamos a tener este retraso aquí. Ahora, de vuelta en nuestra ruta principal de índice, definamos de manera declarativa cómo queremos que se vea el estado de carga. Tomaré esto y lo envolveremos en suspense de React, y lanzaremos la prop slow aquí, y luego definiremos un estado de fallback de cómo queremos que se vea la carga, y eso será carga de tarjetas. Guardaré aquí.

Y ahora, cuando recargo la página, en realidad, para efecto dramático, el efecto dramático es divertido. Iré a about blank, localhost nuevo. Vemos instantáneamente la interfaz de usuario, los data que son lentos se transmiten desordenados y se ubican junto con el componente. Así que mantienes los data cerca de donde realmente se renderiza la interfaz de usuario. Eso es una gran mejora. Creo que es mucho más agradable trabajar así. 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 enrutador de la aplicación. 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 una búsqueda en una API separada? ¿Y si en su lugar pudiéramos ejecutar este componente completamente en el servidor como un componente de servidor? Bueno, no podríamos usar un controlador de eventos. Necesitamos algo nuevo. Y con la introducción de las acciones de servidor de React y la integración en el enrutador de aplicaciones de Next.js con la capa de almacenamiento en caché y revalidación, hicimos posible hacer algo como esto.

Quiero tener una acción en mi formulario y, de hecho, voy a indicar que este botón sea de tipo enviar porque solo estamos usando el formulario HTML aquí. Solo estamos usando un botón con tipo enviar. Y esta acción va a tomar una función. Podría ser algo como guardar en la base de datos. Ahora, en lugar de eso, lo que podemos hacer aquí, simplemente eliminemos esto por completo, en realidad, porque no necesitamos un controlador de eventos. Vamos a tener una función asíncrona guardar en la base de datos. Copilot está muy equivocado aquí. Todavía necesita aprender cómo funciona esto. Y va a recibir no de data, sino de data del formulario, que utiliza los datos del formulario web aquí. Y esta función se ejecutará en el servidor. La forma en que indicamos esto como una acción de 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 los mostraremos en la consola. Eso me parece correcto.

De acuerdo, nuevo / configuraciones / perfil. ¡Pero vaya! ¿Qué está pasando aquí? Tenemos una incrustación 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, vemos que tenemos un nuevo diseño anidado en el enrutador de la aplicación, y esto está tomando ese componente de diseño de configuraciones 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. Entonces, si quisiéramos tener estado aquí, al hacer 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. Entonces, si vuelvo aquí, en realidad no necesito esto en absoluto porque se ha elevado al archivo de diseño, así que puedo eliminarlo por completo. Y estamos avanzando, pero todavía tenemos la barra de navegación doble, así que vamos a aquí y decir, ya sabes qué Para el diseño de configuraciones, ya no necesitamos esto. ¡Boom! Adiós. Ahí está nuestra nueva característica, la barra de navegación doble. 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 crear una ruta de API separada, funciona esto? Espero que sí. ¡Lo hace! ¡Woo! Increíble. No sé ustedes, pero ese código me parece mucho más divertido de escribir. Así que definitivamente es una mejora allí. Lo último de lo que hablaré antes de pasar a las preguntas y respuestas es 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 debido a que el enrutador de la aplicación está construido sobre los componentes de servidor de React, ahora podemos colocar data junto con la interfaz de usuario. Si quisiéramos esta tabla, por ejemplo, quisiéramos decir, ya sabes qué, en realidad, esto va a ser una función asíncrona. Vamos a esperar a obtener algunos data. Esto se ejecutará y almacenará en caché esos data, almacenará en caché esa búsqueda como estática de forma predeterminada, lo que significa que esto funciona tanto si implementas en un servidor de Node.js, implementas en algún lugar como Vercel, o incluso lo exportas como un conjunto de archivos HTML y JavaScript, porque esto se puede almacenar en caché y pre-renderizar durante la compilación. Ahora, digamos que quieres aprovechar algunas características del servidor. Tal vez queremos esta lista de facturas, y no se actualiza con demasiada frecuencia. Tal vez se actualice cada 60 segundos.

Bueno, aún podemos almacenar en caché esos datos como estáticos data de forma predeterminada, pero luego tal vez digamos, ya 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 actualizar periódicamente esos datos como máximo cada 60 segundos.

Sé que pasé rápidamente por muchas cosas aquí. Hay mucho más que podría cubrir, incluso hablar sobre 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. También lo mostraré rápidamente, ya que estoy aquí. Digamos que queremos tener data y establecer data o algo así. Queremos usar el estado, algo así en nuestro modo mínimo para este interruptor. Bueno, esto mostrará un error. No se puede encontrar used state, eso tiene sentido. Pero déjame importarlo aquí. Y ahora lo que queremos hacer aquí para poder usar used state, diríamos, ya sabes qué, para tener un componente interactivo en el lado del cliente, tenemos un límite mucho más claro entre lo que se ejecuta en el servidor y lo que se ejecuta en el cliente. Entonces vamos a marcar esto explícitamente con la directiva used client para decir que este componente tiene acceso a usar cualquier gancho de React en el ecosistema, ganchos incorporados como used state o used effect. Así que ahora, con suerte, 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. Esto fue una rápida presentación del enrutador de la aplicación. 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 último truco aquí es que todo esto funciona en la misma aplicación de Next.js. Todas las API en las que trabajamos y usamos desde el primer día, get initial props, todo lo que hemos construido desde el principio, todo esto puede coexistir en una sola aplicación y vivir en armonía juntos. Así que puedes mantener tu enrutador de páginas, que funciona muy bien en producción hoy en día, y luego adoptar incrementalmente el enrutador de la aplicación 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. Dado que el enrutador de la aplicación es estable ahora, ¿debemos alejarnos de las páginas lo antes posible o seguirá manteniéndose a largo plazo? Sí, gran pregunta. Espero que el objetivo de mi charla haya sido mostrar que se ha diseñado para que vivan juntos. Entonces, no necesariamente tienes que pasar de las páginas al enrutador de la aplicación hoy en día. Aunque el núcleo es estable, todavía habrá errores y cosas en las que estamos trabajando. Y realmente apreciamos que todos den retroalimentación y prueben cosas a medida que trasladamos el núcleo a estable. Diría que adoptes las cosas cuando te sientas listo para tu equipo, pero no deberías sentirte presionado para hacer el cambio. Ambos pueden seguir viviendo y el enrutador de páginas seguirá siendo compatible. Incluso estamos agregando algunas características nuevas allí también. Así que definitivamente seguirá siendo mantenido.

Genial. Increíble. Esa es una gran noticia. Sí. Muchos votos para saber cuándo estará disponible la obtención de data en SSR para el diseño. Por ejemplo, obtener y navegar para un diseño compartido. Sí. Lo genial de los Componentes del Servidor de React es que todos los ejemplos que mostré hoy obtenían data dentro de la página. Pero si quisiéramos, podríamos llevar eso al nivel del diseño. Y por ejemplo, tenía ese componente de diseño para nuestras páginas de configuración. Digamos que necesitábamos obtener información de usuario y compartirla en una barra de navegación entre todas las páginas, en realidad puedes hacer eso. Puedes marcar el diseño como asíncrono. Puedes esperar una obtención de data. Y eso no era posible antes en la ruta de páginas. No había obtención de data en el nivel superior. Y no sería una conferencia de desarrolladores sin preguntarte sobre tu configuración. Sí. Porque mucha gente quería saber cómo hiciste que tu cursor fuera tan suave. Sí. Este es el consejo. Este es el consejo del grabador de video de transmisión. Hay una configuración en VS Code que tiene el seguimiento suave del cursor. Y es muy relajante de ver. Así que recomendaría activarlo. Sí. Me encanta que eso sea lo más importante... Me alegra que lo hayamos mencionado. Esa es la conclusión principal. Muy bien. Se nos acabó el tiempo para preguntas y respuestas. Muchas gracias, Lee, por tu charla. Puedes encontrar a Lee en el stand si tienes más preguntas o simplemente quieres charlar uno a uno. Así que gracias de nuevo. Increíble.