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:
- Empezando con Next.js
- Next.js vs Gatsby vs create-react-app
- Cómo instalar Next.js
- Vincular dos páginas en Next.js usando Link
- Contenido dinámico en Next.js con el enrutador
- Alimente datos a un componente Next.js usando getInitialProps
- Aplicar estilo a los componentes de Next.js con CSS
- Precarga de contenido en Next.js
- Usando el enrutador para detectar el enlace activo en Next.js
- Ver fuente para confirmar que SSR está funcionando en Next.js
- Next.js: rellene la etiqueta principal con etiquetas personalizadas
- Implementar una aplicación Next.js en Now
- Next.js: ejecuta código solo en el lado del servidor o del cliente en Next.js
- Implementar una aplicación Next.js en producción
- Cómo analizar los paquetes de aplicaciones Next.js
- Módulos de carga diferida en Next.js
- Agregar un componente contenedor a su aplicación Next.js
- Los íconos agregados por Next.js a su aplicación
- Paquetes de aplicaciones Next.js
- Cómo usar el enrutador Next.js
- Cómo utilizar las rutas de la API de Next.js
- Cómo obtener cookies del lado del servidor en una aplicación Next.js
- Cómo cambiar el puerto de una aplicación Next.js