Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Shallow navigation, router.query y data fetching

8/19
Recursos

Comando: git checkout -b dev 4-router

Aportes 3

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

🔀 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