Shallow navigation, router.query y data fetching

🔀 Shallow Navigation

Recursos

Routing: Shallow Routing | Next.js

Apuntes

• Es una navegación no profunda
• También conocido como Routing en memoria
  • La URL se actualiza, pero el sitio no recarga
• En Next.js la forma en la que funciona es:
  1. Utilizar el router
  2. Especificamos la opción de shallow

👀 La URL se actualizará, pero el estado del componente no, además que Next.js si tiene `getStaticProps`, `getServerSideProps`, etc. Next.js no llamará a los mismos

• Simplemente, el componente se va a actualizar con los cambios de router y se va a renderizar manteniendo el estado del mismo
• Shallow Navigation funciona únicamente en rutas similares
  • Donde exista un padre compartido

📌 **RESUMEN:** Shallow Navigation principalmente nos ayuda a cambiar la URL de la aplicación sin volver a ejecutar los métodos de traída de datos (`getStaticProps`, `getServerSideProps`, `getStaticPaths`) además que no cambia el estado del componente

En vez de colocar heigth?: never podrías omitirlo:

interface Props extends Omit<ImageProps, "height"> {
  aspectRatio: AspectRatio;
  fit?: Fit;
  width: number;
}

ShallowNavigation: Navegación no profunda, routing en memoria