#UnderTheHood enlazando páginas: prefetching automático

Next.js ha actualizado esta parte del prefetching de paginas desde su version 10.0.3 , ahora su comportamiento por default es hacer es realizar el prefetching de cada uno de los componentes Link que se encuentre en la pagina actual al momento que esta se renderiza , No cuando se le hace hover. Esta parte ya ha sido incluida en su Documentacion

Si queremos deshabilitar este comportaminento por default y solo hacer el prefetching cuando sea un hover o en el evento onMouseEnter
simplemente debemos setear su configuracion en false

<Link href="/about"  prefetch={ false } > <a> About </a> </Link>

De esta forma ya podemos obtener el mismo comportamiento de la clase , el profesor le funciona ya que en este curso al parecer la ultima version en su momento era la 9

Pueden leer mas acerca en este issue

Espero les ayude !

Recién estoy empezando el curso y ya me tiene con la expectativa de todo lo que podré hacer con las maravillas de Next en mis proyectos. Genial!

¿Es recomendable hacer el prefetch cuando en la página destino se tiene que cargar bastante información por ejemplo de una API o un Mapa?

🔍 Under The Hood: Enlazando paginas: prefetching automático

Next.js cuando usamos la etiqueta Link para nuestras rutas. Si hacemos hover o estamos encima de uno de los elementos lo que intentara hacer internamente sera pedir al servidor que prepare ese chunk de código.

RESUMEN: Next.js nos ayuda bastante con técnicas las cuales son bastante inteligentes, como en este caso el prefetching de paginas.

Tuve problemas al tratar de repetir la experiencia dado que tengo activado el addblocker, eso quiere decir que si el usuario tiene el addblocker activado no podrá beneficiarse del prefetching?

Prefetching

/
En la clase anterior, vimos como el uso del componente Link propio de Next.js. Nos ayuda de manera extraordinaria a hacer mas fácil poder crear formas de conexión entre una pagina y otra. Esto del lado del desarrollo. Pero no solo es útil en cuanto facilidad de escribir código y su optimización. sino que incluso es muy beneficioso en cuanto al rendimiento de nuestra aplicación. Esto se debe a que Next.js utiliza algo llamado prefetching.
/
¿Qué es Prefetching?:
/
Prefetching es en pocas palabras. La acción que hace él navegador de cargar de antemano los archivos que este requerirá renderizar en un futuro. Esto lo hace con el fin de que cuando se le solicite al navegador cargar un determinado archivo. Este ya lo habrá tenido el archivo preparado. Y será más rápido el renderizado.
/

No conocia ese tema de prefetching, sería genial poder saber como hacerlo uno mismo solo haciendo el Hover!

Es una maravilla como hace eso, ni parece react, no es convencional y es super práctico

digref

Me gusta mucho esta funcionalidad de NextJS, es algo que yo desconocía por completo, que interesante.