🦋 Prefetching de rutas
Ideas/conceptos claves
link decoration es donde podemos mandar ciertos parámetros por ejemplo: URL?q=busquega&authuser=1
Recursos
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 prefetchas⇒ 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
- Por ejemplo: cuando se quiere realizar una redirección desde el cliente, se podrÃa hacer con
- 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
📌 **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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?