Cuando el componente link de Next.js no es suficiente para cubrir todos los escenarios de precarga, existe una alternativa poderosa: el método prefetch del router. Conocer cuándo y cómo utilizarlo marca la diferencia entre una aplicación rápida y una que deja esperando al usuario en transiciones críticas.
¿Qué es router.prefetch y cómo funciona?
Dentro del objeto router, que se importa desde next/router, encontramos el método prefetch [0:36]. Este método acepta dos parámetros:
- URL: la ruta de la página que queremos precargar.
- as: un parámetro opcional para decorar la URL con un nombre diferente.
En la mayoría de los casos, el primer parámetro es más que suficiente. El uso del parámetro as queda reservado para situaciones poco comunes en las que se necesitan decoraciones de URL, es decir, mostrar al usuario una ruta distinta a la ruta real del recurso.
¿Cuándo se debe usar router.prefetch en lugar de link?
El escenario principal es cuando no estamos utilizando el componente link para dirigir al usuario a otra página [1:03]. Por ejemplo:
- Tenemos un botón que ejecuta una acción, como un llamado al servidor o a la base de datos.
- Al completarse esa acción, hacemos una redirección con
router.push hacia otra página.
- Si esa acción la realizan los usuarios de forma frecuente, conviene ejecutar
router.prefetch de antemano para que Next.js tenga los recursos listos.
En otras palabras, router.prefetch complementa a router.push cuando la transición entre páginas depende de lógica del lado del cliente y no de un enlace directo.
¿Qué limitaciones tiene el prefetching manual?
Existen tres restricciones importantes que conviene recordar [1:38]:
- Solo funciona en producción. Durante el desarrollo puede parecer que no hace nada, pero Next.js lo activa exclusivamente en modo de producción.
- Solo aplica para páginas internas. No es posible hacer prefetch de archivos JavaScript sueltos, hojas de estilo CSS ni páginas externas. La ruta debe existir dentro de la carpeta
pages.
- Solo precarga recursos estáticos de la página. Next.js determina en tiempo de compilación —al ejecutar
yarn build— qué archivos JSON y bundles de JavaScript necesita cada página. Eso es lo que se precarga.
¿Qué ocurre con las peticiones HTTP del lado del cliente?
Si una página realiza llamadas al servidor, peticiones de tipo XHR o cualquier fetch desde el navegador, esas solicitudes no forman parte del prefetch [2:18]. El prefetch se limita a lo que Next.js ya conoce tras el proceso de build: la estructura de la página y sus dependencias estáticas.
Esto significa que los datos dinámicos, como los que provienen de una API REST o una base de datos consultada desde el cliente, se cargarán en el momento en que el usuario acceda a la página, no antes.
Si te interesa profundizar en cómo funciona el prefetching del componente link en producción, revisarlo antes de aplicar router.prefetch aporta una visión más completa del sistema de precarga que ofrece Next.js. ¿Ya lo has probado en tus proyectos? Comparte tu experiencia en los comentarios.
