El Nuevo Enrutador de Aplicaciones de Next.js

Rate this content
Bookmark

Next.js 13.4 lanzó recientemente la versión estable del "Enrutador de Aplicaciones" - un cambio transformador para el núcleo del framework. En esta charla, compartiré por qué hicimos este cambio, los conceptos clave que debes conocer y por qué estoy emocionado por el futuro de React.

27 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy trata sobre el Enrutador de Aplicaciones de Next.js, que ha evolucionado a lo largo de los años y ahora es una característica fundamental de Next.js. La charla cubre temas como agregar componentes, obtener datos remotos y explorar diseños. También se discute el envío de datos de formulario, la simplificación del código y la reutilización de componentes. El Enrutador de Aplicaciones permite la coexistencia con el enrutador de páginas existente y permite obtener datos en el nivel de diseño utilizando los Componentes del Servidor de React.

Available in English

1. Introducción al enrutador de aplicaciones Next.js

Short description:

Hoy, voy a hacer algo un poco diferente porque mi charla será completamente en VS Code. Soy Lee y trabajo en Vercel y lidero la comunidad de Next.js. Recientemente lanzamos algo llamado el enrutador de aplicaciones Next.js. Hoy, voy a hacer una demostración de cómo se ve el enrutador de aplicaciones. 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. Voy a hablar sobre el viaje a través de una aplicación real de cómo llegamos al enrutador de aplicaciones hoy. El núcleo de Next.js es el enrutamiento. Lanzamos Next.js en 2016 con un enrutamiento basado en el sistema de archivos. Esto es en lo que se construyó Next.js hace seis años. Vamos a construir un panel de control de aplicaciones internas que muestra una lista de facturas y tiene algunas páginas de configuración con diseños. Comencemos a estructurar un poco más esta página. Usaremos el diseño de inicio para la barra de navegación y las facturas. Esta es la estructura de nuestra página de inicio.

¡Woo! Como ella dijo, soy Lee y trabajo en Vercel y lidero la comunidad de Next.js. Si no has oído hablar de Next.js, es un marco de trabajo de React. Y recientemente lanzamos algo llamado el enrutador de aplicaciones Next.js. ¿Alguien ha oído hablar del enrutador de aplicaciones? Vale, eso es más manos de las que esperaba, eso es genial.

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.

2. Añadiendo Componentes y Obteniendo Datos Remotos

Short description:

Ahora agreguemos algunos componentes como tarjetas y tablas para mostrar estadísticas sobre nuestra cuenta. Obtendremos datos remotos utilizando la API getInitialProps y los pasaremos a nuestros componentes de React. Esta API se ejecuta en el servidor y en las transiciones de página. Para mejorar esto, la API se dividió en dos funciones separadas: getInitialProps y getServerSideProps.

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.

3. Explorando la Obtención de Datos y Diseños

Short description:

Copilot ayuda con funciones asíncronas que devuelven objetos. Puedes elegir datos frescos en cada solicitud o pre-renderizar durante la construcción. Las APIs lentas pueden causar spinners de carga y páginas en blanco. Es difícil definir estados de carga junto a los componentes. Obtener datos en el lado del cliente puede tener compensaciones. Construiremos páginas de configuración con diferentes diseños.

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í.

4. Creando el Diseño de la Página de Configuración y el Formulario

Short description:

Esta parte se centra en importar el diseño desde el diseño de configuración y crear un diseño de página de configuración diferente con una barra superior y una subnavegación. También muestra cómo crear un formulario para enviar datos, incluyendo componentes como nombre, biografía y un botón. El botón puede contener elementos secundarios y se utiliza para actualizar el perfil.

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.

5. Enviando Datos del Formulario y Manejando Compromisos

Short description:

¿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. 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. 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.

¿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.

6. Simplificando el Código y Reutilizando Componentes

Short description:

Hay mucho código adicional que necesitas escribir. Veremos algunas formas en las que podemos reducir gran parte de ese código y simplificar el modelo mental. Hablemos sobre la reutilización de diseños y componentes. Tenemos un componente llamado modo mínimo que permite alternar los datos mostrados en la tabla de facturas. Podemos colocar nuestro código de obtención de datos junto con nuestros componentes para evitar pasar datos del servidor al cliente. Hagamos que nuestra aplicación sea más fluida eliminando código innecesario.

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.

7. Obteniendo Datos de Tarjetas y Manejando Datos Lentos

Short description:

Eliminamos la API específica de Next.js y en su lugar utilizamos una función asíncrona para obtener datos. El diseño de nuestra aplicación ahora se puede definir a través del sistema de archivos, agilizando el proceso. Podemos manejar la obtención lenta de datos mostrando un estado de carga al usuario. La obtención de datos ahora está ubicada junto con nuestro componente de tarjetas, lo que permite una mayor flexibilidad en el manejo de retrasos en los datos.

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í.

8. Recargando la Página y Refactorizando el Código

Short description:

Y ahora, cuando recargo la página, veo instantáneamente la interfaz de usuario con los datos transmitiéndose. Los datos están ubicados junto con el componente, lo que facilita mucho el trabajo. Pasemos al segundo problema, la página de perfil o la página de configuración. Podemos refactorizar el código para que el componente se ejecute completamente en el servidor como un componente de servidor utilizando las acciones de servidor de React. Esto elimina la necesidad de una API de búsqueda separada y nos permite utilizar una acción en el formulario con una función en el lado del servidor.

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.

9. Refactorizando Diseños y Colocando Datos

Short description:

Refactorizamos el diseño compartido entre la página de inicio y las páginas de configuración en los diseños del sistema de archivos. El componente de diseño se eleva al archivo de diseño, eliminando la necesidad de rutas de API separadas. La página de visualización y la página de configuración pueden reutilizar el diseño compartido. Los datos se pueden colocar junto con la interfaz de usuario utilizando los componentes de servidor de React, lo que permite funciones asíncronas y almacenamiento en caché de datos.

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.

10. Explorando las características del enrutador de la aplicación y la coexistencia

Short description:

Podemos actualizar periódicamente los datos cada 60 segundos estableciendo el valor de revalidación. El enrutador de la aplicación permite una clara separación entre el código del lado del servidor y del lado del cliente, lo que permite el uso de React hooks en el cliente. El enrutador de la aplicación puede coexistir con el enrutador de páginas existente en la misma aplicación de Next.js. Puedes adoptar incrementalmente el enrutador de la aplicación cuando tú y tu equipo estén listos. El enrutador de la aplicación es estable ahora, pero no es necesario alejarse de las páginas inmediatamente. Ambos enrutadores seguirán siendo compatibles y mantenidos.

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.

11. Obtención de datos en SSR para diseños

Short description:

Lo genial de los Componentes del Servidor de React es que ahora puedes obtener datos a nivel de diseño. Esto significa que puedes obtener datos para un diseño compartido, como información de usuario, y compartirlo en todas las páginas. Esto no era posible antes con la ruta de páginas.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai

Workshops on related topic

React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
React Summit 2023React Summit 2023
71 min
Building Blazing-Fast Websites with Next.js and Sanity.io
WorkshopFree
Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites.
In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel.
By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
WorkshopFree
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.

Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js & building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.