Actualización del Enrutador de Aplicaciones de Next.js

El Enrutador de Aplicaciones (App Router) representa una nueva base para el futuro de Next.js, pero reconocemos que hay oportunidades para mejorar la experiencia. Nos gustaría compartir una actualización sobre nuestras prioridades actuales.

Para las próximas versiones de Next.js, nos estamos enfocando en las siguientes áreas:

Mejorar el rendimiento
Mejorar la estabilidad
Mejorar la educación para desarrolladores

El Enrutador de Aplicaciones

Primero, es útil proporcionar algo de contexto sobre cómo se ha diseñado el Enrutador de Aplicaciones.

Superando el Enrutador de Páginas al alinearse con React

A medida que vimos una mayor adopción y aplicaciones a mayor escala construidas con Next.js, recibimos comentarios de la comunidad e identificamos áreas donde comenzamos a alcanzar los límites del Enrutador de Páginas (Pages Router).

Más notablemente, el Enrutador de Páginas de Next.js no fue diseñado para streaming, un pilar fundamental en React moderno, que nos ayuda a abordar las limitaciones que enfrentábamos y materializar nuestra visión a largo plazo para Next.js.

Crear APIs de framework compatibles con streaming para la obtención de datos, carga de recursos y metadatos de página, así como aprovechar los nuevos primitivos de React, requirió grandes cambios en la arquitectura central de Next.js.

Aprovechamos la oportunidad para construir sobre las últimas características concurrentes de React, como Componentes del Servidor (Server Components), Suspense y más, que han sido diseñadas para arquitecturas de streaming.

La adopción incremental no es negociable

No queríamos que nuestra comunidad tuviera que reconstruir sus aplicaciones desde cero para actualizar a la última versión de Next.js. Creemos que la adopción incremental es la mejor estrategia para evolucionar aplicaciones con el tiempo.

Migración incremental por ruta: Sin una reescritura mayor de su aplicación, puede mover una sola ruta de su aplicación al Enrutador de Aplicaciones y comenzar a aprovechar nuevas características a su propio ritmo. Consulte nuestra guía de adopción incremental o vea un tutorial.
Reversión fácil: Si no está satisfecho con el rendimiento o la experiencia del desarrollador del Enrutador de Aplicaciones, puede revertir fácilmente al Enrutador de Páginas para esa ruta específica.

Estamos explorando más oportunidades para hacer que la adopción incremental sea aún más fácil.

Camino hacia la estabilidad

Comenzamos a construir el Enrutador de Aplicaciones de Next.js hace más de un año y hemos estado lanzando constantemente nuevas características y mejoras desde entonces.

Anuncio inicial: En mayo de ese año, publicamos un RFC para delinear nuestros planes para hacer que el enrutamiento y los diseños sean más flexibles.
Beta temprana: En Next.js 13, lanzamos la primera versión del Enrutador de Aplicaciones, permitiendo que la comunidad lo probara y proporcionara comentarios tempranos.
API estable: Respondiendo a los comentarios, enfocamos nuestros esfuerzos en finalizar la API central. En la versión 13.4, marcamos la API central del Enrutador de Aplicaciones como estable y lista para una adopción más amplia.

Nuestro enfoque actual

Marcar la estabilidad le indicó a la comunidad que la API central estaba definida y no sufriría cambios importantes que requirieran reescrituras.

Desde entonces, hemos recibido muchos comentarios valiosos y el aumento en la adopción ha revelado inevitablemente errores y oportunidades para seguir mejorando.

Queremos que sepa que aún no estamos satisfechos con la experiencia de usar el Enrutador de Aplicaciones y es nuestra máxima prioridad en adelante. Así que hablemos del trabajo que estamos haciendo para mejorar esta experiencia.

Mejorando el rendimiento

En los próximos meses, nos enfocamos en tres aspectos del rendimiento: velocidad de iteración local, tiempos de compilación en producción y rendimiento sin servidor (serverless).

Rendimiento en desarrollo local

A medida que Next.js ha madurado y el tamaño de las aplicaciones construidas con él ha crecido, hemos ido reemplazando gradualmente partes de su arquitectura subyacente con herramientas más rápidas y escalables.

Progreso de migración: Comenzamos reemplazando Babel (compilación) y Terser (minificación) con SWC. Esto ha ayudado a mejorar las velocidades de iteración local y los tiempos de compilación en producción.
Inversión a largo plazo: Mantener un gran rendimiento de Fast Refresh independientemente del tamaño de las aplicaciones significa hacer que Next.js opere de la manera más incremental posible durante el desarrollo local, compilando y empaquetando solo el código necesario.

Es por eso que actualmente estamos trabajando en reemplazar webpack (empaquetado) con Turbopack, que se construye sobre un motor de cálculo incremental de bajo nivel que permite almacenamiento en caché hasta el nivel de funciones individuales.

Las aplicaciones Next.js que migren a Turbopack verán mejoras sostenidas en la velocidad de Fast Refresh incluso a medida que crecen en tamaño.

En los últimos meses, el equipo de Turbo se ha enfocado en mejorar el rendimiento de Turbopack y el soporte para todas las características de Next.js y las APIs del Enrutador de Aplicaciones.

Turbopack está actualmente disponible en beta (next dev --turbo).
Mejorando la arquitectura actual: Además de invertir en el futuro, seguimos haciendo mejoras de rendimiento a nuestra arquitectura webpack existente.

Para ciertas aplicaciones Next.js, especialmente aquellas que actualizan miles de módulos, hemos visto informes de inconsistencia con el desarrollo local y Fast Refresh. Estamos trabajando para mejorar el rendimiento y la confiabilidad aquí. Por ejemplo, recientemente agregamos configuraciones predefinidas (modularizeImports) para manejar grandes bibliotecas de iconos que podrían forzar accidentalmente a que miles de módulos se recarguen en cada solicitud.

Rendimiento en tiempo de compilación

También estamos trabajando en compilaciones de producción con Turbopack (next build --turbo) y hemos comenzado a implementar las primeras piezas de este trabajo. Espere más actualizaciones sobre esto en los próximos lanzamientos.

Rendimiento en producción

Finalmente, en Vercel, estamos trabajando para optimizar el rendimiento y el uso de memoria de las Funciones de Vercel definidas a través del código de la aplicación Next.js, asegurando tiempos de inicio en frío mínimos mientras se mantienen los beneficios de una arquitectura serverless escalable. Este trabajo ha resultado en nuevas capacidades de trazado (experimental) en Next.js y exploraciones tempranas de herramientas de desarrollo del lado del servidor.

Mejorando la estabilidad

El Enrutador de Páginas ha existido durante seis años. El lanzamiento del Enrutador de Aplicaciones significó la introducción de nuevas APIs que aún son jóvenes, con solo seis meses de uso. Hemos avanzado mucho en poco tiempo, pero todavía hay oportunidades para mejorar a medida que aprendemos más de nuestra comunidad y cómo la están usando.

Agradecemos la disposición de la comunidad para adoptar con entusiasmo el Enrutador de Aplicaciones y proporcionar comentarios. Ha habido una serie de informes de errores que estamos investigando y estamos agradecidos por las reproducciones mínimas que han creado para ayudar a aislar problemas y verificar correcciones.

Desde la versión 13.4, ya hemos corregido varios errores de alto impacto relacionados con la estabilidad que están disponibles en la última versión de parche (13.4.7). Continuaremos enfocándonos en el rendimiento y la estabilidad con alta intensidad.

Mejorando la educación para desarrolladores

Si bien creemos que las nuevas características del Enrutador de Aplicaciones y React moderno son poderosas, también requieren educación y documentación adicionales para ayudar a enseñar estos nuevos conceptos.

Características de Next.js

Hemos estado trabajando durante el último año para reescribir la documentación de Next.js desde cero. Este trabajo ahora está disponible en nextjs.org/docs. Nos gustaría destacar algunas piezas importantes:

Alternancia entre Páginas y Aplicación: Puede cambiar entre aprender el Enrutador de Páginas o el Enrutador de Aplicaciones usando el botón en el lado izquierdo de la documentación. Además, puede filtrar los resultados de búsqueda según su elección de enrutador.
Contenido y arquitectura de información mejorados: Casi todas las páginas de la documentación del Enrutador de Aplicaciones han sido actualizadas, incluyendo una estructura más clara y cohesión entre páginas, y cientos de nuevas ilustraciones para explicar visualmente cómo funciona Next.js.
Más por venir: Tenemos más trabajo por hacer aquí. El equipo de Experiencia del Desarrollador en Vercel está trabajando duro para proporcionar recursos de aprendizaje adicionales (incluyendo un curso actualizado en /learn que enseña el Enrutador de Aplicaciones) y ejemplos de bases de código del mundo real (incluyendo una reescritura de Next.js Commerce).

Lanzaremos nuevo contenido en la documentación, en Twitter, YouTube y más.

Nuevas características de React

También hemos escuchado sus comentarios sobre la educación en torno a las nuevas características de React que están disponibles en el Enrutador de Aplicaciones de Next.js.

Componentes del Servidor (Server Components): Es importante destacar que características como los Componentes del Servidor y convenciones como la directiva "use client" no son específicas de Next.js, sino parte del ecosistema más amplio de React.

Nuestro equipo, nuestros socios en Meta y otros contribuyentes independientes están trabajando para proporcionar más educación sobre estos temas. Son conceptos tempranos, pero confiamos en el ecosistema de React y la educación continua.
Componentes del Cliente (Client Components): Con la reciente conversación sobre los Componentes del Servidor, es importante señalar que los componentes del cliente no son una desoptimización. El cliente es una parte válida del modelo de React y no desaparecerá.

Puede pensar en los componentes del cliente como el ecosistema existente de Next.js hoy, donde sus bibliotecas y herramientas favoritas siguen funcionando. Por ejemplo, una pregunta común que hemos visto es si "use client" necesita agregarse a cada archivo para convertirlo en un componente del cliente. Esto no es necesario, pero entendemos que estos conceptos son nuevos y tomará tiempo aprenderlos. Solo necesita marcar el límite de nivel superior donde su código pasa del servidor al cliente. Esta arquitectura le permite entrelazar componentes del servidor y del cliente.
Crecimiento del ecosistema de terceros: Además de la educación, el ecosistema en torno a las nuevas características de React todavía está creciendo. Por ejemplo, Panda CSS, una biblioteca CSS-in-JS de los creadores de Chakra UI, acaba de anunciar soporte para React Server Components.
Acciones del Servidor (Alpha): Las Acciones del Servidor permiten mutaciones de datos del lado del servidor, reducción de JavaScript del lado del cliente y formularios con mejora progresiva. Aún no recomendamos usar Acciones del Servidor en producción. Agradecemos los comentarios tempranos de los probadores alfa que nos ayudan a dar forma al futuro de esta característica.

Gracias

Estamos agradecidos de que muchos de ustedes hayan elegido aprender y construir con Next.js.

Nuestro enfoque en el rendimiento, la estabilidad y la experiencia del desarrollador se reflejará en los próximos lanzamientos de Next.js. Queremos que usar Next.js sea encantador, y que los haga (a usted y a su equipo) más productivos.

Como siempre, apreciamos enormemente sus comentarios. Si está experimentando algún problema con Next.js, por favor abra un issue, o inicie una nueva discusión, y lo investigaremos.