Navegación Shallow en Next.js: Uso y Beneficios

Cuando construyes una aplicación con múltiples vistas que comparten estructura, actualizar la URL sin provocar una recarga completa de la página mejora enormemente la experiencia del usuario. En Next.js esto se logra con una técnica llamada shallow routing, y entender cómo funciona te permitirá crear interfaces más fluidas y profesionales.

¿Cómo quedó el componente de imagen optimizado?

Antes de entrar en el router, vale la pena repasar las mejoras aplicadas al componente Image.tsx [0:08]. Se creó dentro de la carpeta components con tipos mucho más definidos: ImageLayout, AspectRatio e ImageFit, todos alineados con la API de Contentful. Además, las propiedades del componente se extendieron usando todo lo que ofrece next/image, sumado a las propiedades personalizadas. Esta técnica de composición de tipos en TypeScript permite reutilizar definiciones existentes sin duplicar código.

• Se utilizó React.useCallback para que el loader solo se ejecute cuando aspectRatio o fit cambien [0:47].
• La función aspectRatioToRatio se amplió con más formatos, pero su lógica base se mantuvo.
• El componente se implementó en todas las páginas: PlantCollection con aspect ratio 9×12, Hero con el mismo ratio, y así sucesivamente [1:08].

El resultado visual es notable: imágenes con cortes limpios, sin pixelarse, servidas directamente desde Contentful.

¿Qué problema resuelve el shallow routing en la página de autores?

Para ilustrar el shallow routing, se preparó una sección llamada Top Stories [2:02]. Dentro de la carpeta pages existe top-stories/index.tsx y [author].tsx, una página dinámica que captura el parámetro author desde la URL.

¿Cómo funciona la redirección en el index?

El archivo index.tsx usa getServerSideProps [4:10]. Valida que la lista de autores exista y, si es así, toma el primer autor y utiliza la propiedad redirect de Next.js para redirigir automáticamente. Si llegas a /top-stories sin parámetros, siempre serás enviado al primer autor disponible.

¿Qué hace la página dinámica de autor?

En [author].tsx [4:53] también se usan server side props. Se valida si el autor de la URL realmente existe en la lista. Si existe, se renderiza su información. Si no, se redirige al primer autor válido. En el lado del cliente, un hook personalizado hace una petición para traer las plantas asociadas a ese autor [5:50], lo que significa que esa carga ocurre en el navegador, no en el servidor.

El problema era evidente: al hacer clic en distintos autores, la información cambiaba correctamente, pero la URL nunca se actualizaba [6:16]. Si alguien compartía el enlace o recargaba la página, perdía la selección.

¿Cómo implementar shallow navigation con el router de Next.js?

El shallow routing —o navegación no profunda— actualiza la URL sin que la página haga un full reload y sin que Next.js vuelva a ejecutar getServerSideProps ni getStaticProps [7:15]. Si has trabajado con React Router, el concepto es similar al routing en memoria.

Para implementarlo, se reemplazó el estado local de React por el router como fuente de verdad [8:08]:

tsx import { useRouter } from 'next/router'

const router = useRouter() const currentAuthor = router.query.author

if (typeof currentAuthor !== 'string') { // Manejo de error: solo aceptamos string }

El nombre author en router.query.author viene directamente del nombre del archivo [author].tsx [8:30]. Una vez obtenido, se usa como valor activo en los tabs.

Para manejar el cambio al hacer clic, se utiliza router.push con la opción shallow: true [9:19]:

tsx router.push( /top-stories/${nuevoAutor}, undefined, { shallow: true } )

Con esto, al seleccionar un autor diferente, la URL se actualiza inmediatamente sin recargar la página ni volver a llamar a los métodos del servidor [9:52].

¿Cuáles son las limitaciones del shallow routing?

• El estado de React no cambia automáticamente: Next.js solo actualiza la URL y re-renderiza el componente con los nuevos valores del router [10:10].
• Solo funciona entre rutas con el mismo padre: si intentas hacer shallow routing desde /top-stories/autor hacia una ruta completamente diferente como /plantas/detalle, Next.js lo ignorará y hará una navegación completa [10:30].
• Los métodos getStaticProps y getServerSideProps no se vuelven a ejecutar, lo cual es exactamente el comportamiento deseado para este tipo de interacción.

Si estás construyendo interfaces con pestañas, filtros o vistas que comparten estructura, el shallow routing es la herramienta indicada. ¿Ya lo has probado en alguno de tus proyectos? Comparte tu experiencia.