Décryptage du fonctionnement des composants Image & Link de NextJS

Link est un composant moins complexe à appréhender. Il permet à l’utilisateur·rice de passer d’une page à l’autre.

Voici comment établir un lien vers une autre page avec NextJS :

import Link from 'next/link'

export default function Page() {
  return <Link href={"/article-nextjs">Article NextJS</Link>
}

Sachez toutefois que ce composant est capable de bien plus : il possède une propriété nommée prefetch (dont la valeur par défaut est true). Celle-ci permet de prefetch (pré-charger) la ou les futures pages sur lequel l’utilisateur·rice pourrait se rendre. Résultat, différentes pages sont mises en cache dans le navigateur par NextJS. Ainsi, lorsqu’un·e utilisateur·rice clique sur un lien, la page est chargée de façon quasi-instantanée.

Attention toutefois à ne pas en abuser. On peut vite remplir le cache navigateur pour pas grand-chose, effectuer des requêtes entre le navigateur et le serveur de manière inutile. Pour désactiver le prefetch sur un lien, il suffit simplement d’ajouter la propriété prefetch et de passer la valeur à false :

<Link href={"/article-nextjs"} prefetch={false}>

Les pages prefetch sont bien entendu celles visibles dans le viewport (zone d’affichage): même stratégie qu’avec le chargement des images.

Link possède aussi d’autres propriétés plus secondaires, comme scroll permettant de repositionner (ou non) l’utilisateur·rice en haut de la nouvelle page consultée.

Le dernier attribut se nomme replace : il permet de remplacer l’URL enregistrée dans l’historique du navigateur au lieu d’ajouter une nouvelle entrée.

Ces deux composants sont donc intéressants à intégrer dans des projets NextJS, mais il est essentiel de bien connaître leur fonctionnement pour éviter d’alourdir votre service - par manque de connaissance ou de paramétrage.