Ideas/conceptos claves

link decoration es donde podemos mandar ciertos parámetros por ejemplo: URL?q=busquega&authuser=1

Recursos

next/router | Next.js

Apuntes

• Para realizar un prefetch de una página de forma manual se puede realizar de la siguiente manera

router.prefetch(
	url: string,
	as?: string
)

• url ⇒ la URL que deseamos hacer un prefetch
• as ⇒ se utiliza en caso de querer decorar el recurso con una URL diferente

Precargar páginas para realizar transiciones más rápidas en el lado del cliente. Este método solo es útil para navegaciones sin next / link, ya que next / link se encarga de precargar las páginas automáticamente.

• Útil si no se usó <Link />
  • Por ejemplo: cuando se quiere realizar una redirección desde el cliente, se podría hacer con router.push
  • En caso de que esta acción se realiza de forma constante, una mejora podría ser implementar router.prefetch
• Solo funciona en producción
  • En desarrollo no pasará nada, ya que Next.js, lo habilita únicamente cuando la aplicación está en producción
• Solo funciona para rutas de Next.js
  • Esta funcionalidad funciona únicamente con una página de Next.js
  • No funcionará el prefetch en el caso de un JS, CSS o páginas fuera de Next.js u otros sitios
  • Debe estar dentro de la carpeta pages
• Prefetch de assets de la página. (No XHR)
  • El prefetch se encargará de pre cargar los recursos que necesite la página para cargarse correctamente
  • Este proceso se realiza en tiempo de compilación guardando la información necesaria en un JSON, el código JavaScript que necesita
    • Esto implica que peticiones HTTP no se cargarán, únicamente la información necesaria

<aside> 📌 RESUMEN: router.prefetch precarga de forma manual una página de Next.js mejorando la velocidad de carga en el cliente, esto se realiza en tiempo de compilación guardando la información necesaria para mostrar anticipadamente

</aside>