Acheminer le préchargement dans Next.js

Découvrez comment Next.js accélère la navigation grâce à la prélecture des routes et comment la personnaliser.

Milica Mihajlija

Dans cet article, vous allez découvrir le fonctionnement du routage dans Next.js, son optimisation pour la vitesse et comment le personnaliser pour l'adapter au mieux à vos besoins.

Composant <Link>

Dans Next.js, vous n'avez pas besoin de configurer le routage manuellement. Next.js utilise le routage basé sur le système de fichiers, ce qui vous permet de créer des fichiers et des dossiers dans le répertoire ./pages/ :

Pour créer un lien vers différentes pages, utilisez le composant <Link>, comme vous le feriez avec l'ancien élément <a> :

<Link href="/margherita">
  <a>Margherita</a>
</Link>

Lorsque vous utilisez le composant <Link> pour la navigation, Next.js fait un peu plus pour vous. Normalement, une page est téléchargée lorsque vous suivez un lien vers celle-ci, mais Next.js précharge automatiquement le code JavaScript nécessaire pour l'afficher.

Lorsque vous chargez une page comportant quelques liens, il est probable que le composant qui se trouve derrière un lien ait déjà été récupéré au moment où vous le suivez. Cela améliore la réactivité de l'application en accélérant la navigation vers de nouvelles pages.

Dans l'application exemple, la page index.js est associée à margherita.js avec un <Link> :

Utilisez les outils pour les développeurs Chrome pour vérifier que margherita.js est préchargé : 1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .

1. Ouvrez les outils pour les développeurs Chrome.
2. Cliquez sur l'onglet Réseau.
3. Cochez la case Désactiver le cache.
4. Actualisez la page.

Lorsque vous chargez index.js, l'onglet Réseau indique que margherita.js est également téléchargé :

Fonctionnement du préchargement automatique

Next.js précharge uniquement les liens qui apparaissent dans la fenêtre d'affichage et utilise l'API Intersection Observer pour les détecter. Il désactive également la prélecture lorsque la connexion réseau est lente ou lorsque les utilisateurs ont activé Save-Data. Sur la base de ces vérifications, Next.js injecte dynamiquement des balises <link rel="preload"> pour télécharger les composants pour les navigations ultérieures.

Next.js ne fait que récupérer le code JavaScript, sans l'exécuter. Ainsi, aucun contenu supplémentaire que la page préchargée pourrait demander n'est téléchargé tant que vous n'avez pas cliqué sur le lien.

Éviter le préchargement inutile

Pour éviter de télécharger du contenu inutile, vous pouvez désactiver la prélecture pour les pages rarement visitées en définissant la propriété prefetch sur false dans <Link> :

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

Dans cette deuxième application exemple, la page index.js comporte un <Link> à pineapple-pizza.js avec prefetch défini sur false :

Pour inspecter l'activité réseau, suivez les étapes du premier exemple. Lorsque vous chargez index.js, l'onglet Réseau des outils pour les développeurs indique que margherita.js est téléchargé, mais pas pineapple-pizza.js :

Précharger avec un routage personnalisé

Le composant <Link> convient à la plupart des cas d'utilisation, mais vous pouvez également créer votre propre composant pour effectuer le routage. Next.js vous facilite la tâche grâce à l'API de routeur disponible dans next/router. Si vous souhaitez effectuer une action (par exemple, envoyer un formulaire) avant d'accéder à une nouvelle route, vous pouvez la définir dans votre code de routage personnalisé.

Lorsque vous utilisez des composants personnalisés pour le routage, vous pouvez également y ajouter la prélecture. Pour implémenter la prélecture dans votre code de routage, utilisez la méthode prefetch à partir de useRouter.

Prenons l'exemple de components/MyLink.js dans cette application :

La prélecture est effectuée dans le hook useEffect. Si la propriété prefetch d'un <MyLink> est définie sur true, l'itinéraire spécifié dans la propriété href est préchargé lorsque ce <MyLink> est affiché :

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

Lorsque vous cliquez sur le lien, le routage s'effectue dans handleClick. Un message est consigné dans la console et la méthode push accède à la nouvelle route spécifiée dans href :

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

Dans cette application exemple, la page index.js comporte un <MyLink> vers margherita.js et pineapple-pizza.js. La propriété prefetch est définie sur true sur /margherita et sur false sur /pineapple-pizza.

<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza"  title="Pineapple pizza" prefetch={false} />

Lorsque vous chargez index.js, l'onglet Réseau indique que margherita.js est téléchargé et que pineapple-pizza.js ne l'est pas :

Lorsque vous cliquez sur l'un des liens, la console enregistre "Having fun with Next.js." (Amusez-vous avec Next.js) et accède à la nouvelle route :

Conclusion

Lorsque vous utilisez <Link>, Next.js précharge automatiquement le code JavaScript nécessaire pour afficher la page associée, ce qui accélère la navigation vers de nouvelles pages. Si vous utilisez un routage personnalisé, vous pouvez utiliser l'API de routeur Next.js pour implémenter vous-même le préchargement. Évitez de télécharger du contenu inutilement en désactivant la prélecture pour les pages rarement consultées.