Precarga de contenido en Next.js

Cómo funciona la captación previa en una aplicación Next.js

Enenlazando 2 páginas con Next.jsMencioné como elLinkEl componente Next.js se puede usar para crear enlaces entre 2 páginas y, cuando lo usa, Next.jsmaneja de forma transparente el enrutamiento de frontendPara nosotros, cuando un usuario hace clic en un enlace, el frontend se encarga de mostrar la nueva página sin desencadenar un nuevo ciclo de solicitud y respuesta de cliente / servidor, como sucede normalmente con las páginas web.

Hay otra cosa que Next.js hace por ti cuando usasLink.

Tan pronto como un elemento envuelto dentro<Link>aparece en la ventana gráfica (lo que significa que es visible para el usuario del sitio web), Next.js busca previamente la URL a la que apunta, siempre que sea un enlace local (en su sitio web), lo que hace que la aplicación sea súper rápida para el espectador.

Este comportamiento solo se activa enmodo de producción(hablaremos de esto en profundidad más adelante), lo que significa que debe detener la aplicación si la está ejecutando connpm run dev, compile su paquete de producción connpm run buildy ejecutarlo connpm run starten lugar de.

Al usar el inspector de red en DevTools, notará que cualquier enlace en la mitad superior de la página, al cargar la página, comienza la búsqueda previa tan pronto como elloadEl evento se ha activado en su página (se activa cuando la página está completamente cargada y ocurre después de queDOMContentLoadedevento).

Cualquier otroLinkLa etiqueta que no está en la ventana gráfica se buscará previamente cuando el usuario se desplace y

La captación previa es automática en conexiones de alta velocidad (conexiones Wifi y 3G +, a menos que el navegador envíe laSave-DataEncabezado HTTP.

Puede optar por no obtener datos individualesLinkinstancias estableciendo elprefetchapoyo afalse:

<Link href="/a-link" prefetch={false}>
  <a>A link</a>
</Link>

Descarga mi gratisManual de Next.js


Más próximos tutoriales: