¿Cómo funciona el sistema de navegación?
El Router de la aplicación utiliza un enfoque híbrido para el enrutamiento y la navegación. En el servidor, el código de tu aplicación se divide automáticamente por segmentos de ruta. Y en el cliente, Next.js prefetch y almacena en caché los segmentos de ruta. Esto significa que, cuando un usuario navega a una nueva ruta, el navegador no recarga la página, y solo los segmentos de ruta que cambian se vuelven a renderizar, mejorando la experiencia de navegación y el rendimiento.
Este sistema permite una navegación más rápida y eficiente, ya que reduce la cantidad de datos que deben transferirse y procesarse en cada cambio de ruta.
División de Código
La división de código te permite dividir el código de tu aplicación en paquetes más pequeños que el navegador puede descargar y ejecutar. Esto reduce la cantidad de datos transferidos y el tiempo de ejecución para cada solicitud, mejorando el rendimiento.
Los Server Components permiten que el código de tu aplicación se divida automáticamente por segmentos de ruta. Esto significa que solo se carga el código necesario para la ruta actual durante la navegación.
Prefetching
El prefetching es una forma de precargar una ruta en segundo plano antes de que el usuario la visite.
Hay dos maneras de hacer prefetching de rutas en Next.js:
Componente
Las rutas se precargan automáticamente cuando se vuelven visibles en la ventana del usuario. El prefetching ocurre cuando la página se carga por primera vez o cuando se desplaza hasta que la ruta entra en vista.
router.prefetch()
El hook useRouter se puede usar para hacer prefetching de rutas de manera programática.
El comportamiento predeterminado de prefetching del <Link> (es decir, cuando la prop prefetch no se especifica o se deja en null) varía dependiendo del uso de loading.js. Solo el layout compartido, hasta el primer archivo loading.js en el árbol de componentes renderizados, se precarga y almacena en caché durante 30 segundos. Esto reduce el costo de obtener una ruta dinámica completa y permite mostrar un estado de carga instantáneo para una mejor retroalimentación visual a los usuarios.
Puedes desactivar el prefetching configurando la prop prefetch en false. Alternativamente, puedes precargar los datos completos de la página más allá de los límites de carga configurando la prop prefetch en true.
Consulta la referencia de la API de <Link> para más información.
Caching
Next.js tiene una caché en memoria del lado del cliente llamada Router Cache. A medida que los usuarios navegan por la aplicación, los segmentos de ruta prefetch y las rutas visitadas se almacenan en la caché.
Esto significa que, durante la navegación, se reutiliza la caché tanto como sea posible, en lugar de hacer una nueva solicitud al servidor, mejorando el rendimiento al reducir el número de solicitudes y la cantidad de datos transferidos.
Rendering Parcial
El renderizado parcial significa que solo los segmentos de ruta que cambian durante la navegación se vuelven a renderizar en el cliente, y cualquier segmento compartido se mantiene igual.
Por ejemplo, al navegar entre dos rutas hermanas, /dashboard/settings y /dashboard/analytics, la página de configuración se desmontará, la página de análisis se montará con un estado nuevo, y el diseño compartido del dashboard se conservará. Este comportamiento también se aplica entre dos rutas en el mismo segmento dinámico, como con /blog/[slug]/page y navegando de /blog/first a /blog/second.
Sin el renderizado parcial, cada vez que navegas, toda la página se volvería a renderizar en el cliente. Renderizar solo el segmento que cambia reduce la cantidad de datos transferidos y el tiempo de ejecución, lo que mejora el rendimiento.
Soft Navigation
Los navegadores realizan una navegación completa al moverse entre páginas. El Router de aplicaciones de Next.js permite una navegación suave entre páginas, asegurando que solo los segmentos de ruta que han cambiado se vuelvan a renderizar (renderizado parcial). Esto permite que el estado de React en el cliente se mantenga durante la navegación.
Navegación hacia delante y atrás
De manera predeterminada, Next.js recordará la posición del scroll cuando navegues hacia atrás o hacia adelante, y reutilizará los segmentos de ruta almacenados en la caché del Router.
Enrutado entre Pages Router y App Router
Cuando estás migrando poco a poco de pages/ a app/, el router de Next.js se encargará automáticamente de la navegación completa entre ambos. Para detectar las transiciones de pages/ a app/, hay un filtro en el router del cliente que utiliza una comprobación probabilística de las rutas de la aplicación, lo que puede resultar en falsos positivos ocasionalmente. Por defecto, estas ocurrencias deberían ser muy raras, ya que configuramos la probabilidad de falsos positivos en un 0.01%. Esta probabilidad se puede personalizar mediante la opción experimental.clientRouterFilterAllowedRate en next.config.js. Es importante tener en cuenta que reducir la tasa de falsos positivos aumentará el tamaño del filtro generado en el paquete del cliente.
Alternativamente, si prefieres desactivar esta gestión por completo y manejar el enrutamiento entre pages/ y app/ manualmente, puedes establecer experimental.clientRouterFilter en false en next.config.js. Cuando esta función está desactivada, cualquier ruta dinámica en pages que se superponga con rutas de app no se navegará correctamente por defecto.
Conclusiones
En resumen, el sistema de navegación de Next.js mejora significativamente la experiencia de usuario y el rendimiento de la aplicación mediante técnicas como la división de código, prefetching, caching, renderizado parcial y navegación suave. Estas características permiten que solo los segmentos de ruta necesarios se carguen y rendericen, reduciendo la cantidad de datos transferidos y el tiempo de ejecución. Además, la capacidad de recordar la posición del scroll y gestionar la transición entre el Pages Router y el App Router asegura una navegación eficiente y sin interrupciones.