Pré-extraire du contenu dans Next.js

Fonctionnement de la prélecture dans une application Next.js

Danslier 2 pages avec Next.jsJ'ai mentionné comment leLinkLe composant Next.js peut être utilisé pour créer des liens entre 2 pages, et lorsque vous l'utilisez, Next.jsgère de manière transparente le routage frontalpour nous, donc lorsqu'un utilisateur clique sur un lien, le frontend se charge d'afficher la nouvelle page sans déclencher un nouveau cycle de demande et de réponse client / serveur, comme cela se produit normalement avec les pages Web.

Il y a une autre chose que Next.js fait pour vous lorsque vous utilisezLink.

Dès qu'un élément enveloppé dans<Link>apparaît dans la fenêtre d'affichage (ce qui signifie qu'il est visible pour l'utilisateur du site Web), Next.js pré-extrait l'URL vers laquelle il pointe, tant qu'il s'agit d'un lien local (sur votre site Web), ce qui rend l'application ultra rapide pour le spectateur.

Ce comportement n'est déclenché que dansmode de production(nous en reparlerons plus tard), ce qui signifie que vous devez arrêter l'application si vous l'exécutez avecnpm run dev, compilez votre bundle de production avecnpm run buildet lancez-le avecnpm run startau lieu.

En utilisant l'inspecteur de réseau dans les DevTools, vous remarquerez que tous les liens au-dessus du pli, au chargement de la page, démarrent la prélecture dès que leloada été déclenché sur votre page (déclenché lorsque la page est complètement chargée, et se produit après leDOMContentLoadedun événement).

Tout autreLinkla balise qui n'est pas dans la fenêtre sera préchargée lorsque l'utilisateur fait défiler et

La prélecture est automatique sur les connexions haut débit (connexions Wifi et 3G +, sauf si le navigateur envoie leSave-DataEn-tête HTTP.

Vous pouvez désactiver la prélecture individuelleLinkinstances en définissant leprefetchprop àfalse:

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

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: