Découvrez comment Next.js accélère la navigation grâce au préchargement des routes et comment le personnaliser.
Qu'allez-vous apprendre ?
Dans cet article, vous découvrirez comment fonctionne le routage dans Next.js, comment il est optimisé pour plus de vitesse et comment le personnaliser en fonction de vos besoins.
Composant <Link>
Dans Next.js, vous n'avez pas besoin de configurer le routage manuellement.
Next.js utilise un routage basé sur le système de fichiers, qui vous permet de créer simplement des fichiers et des dossiers dans le répertoire ./pages/:
Pour créer des liens vers différentes pages, utilisez le composant <Link>, de la même manière que vous utiliseriez le bon ancien élément <a>:
<Link href="/margherita">
<a>Margherita</a>
</Link>
Lorsque vous utilisez le composant <Link> pour la navigation, Next.js en fait un peu plus pour vous. Normalement, une page est téléchargée lorsque vous cliquez sur un lien, mais Next.js précharge automatiquement le code JavaScript nécessaire à son affichage.
Lorsque vous chargez une page contenant quelques liens, il y a de fortes chances que le composant derrière celui-ci soit déjà récupéré lorsque vous suivez un lien. Cela améliore la réactivité de l'application en accélérant la navigation vers de nouvelles pages.
Dans l'exemple d'application ci-dessous, 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
.
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
Cliquez sur l'onglet Réseau.
Cochez la case Désactiver le cache.
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 le préchargement lorsque la connexion réseau est lente ou lorsque les utilisateurs ont activé Save-Data. En fonction de ces vérifications, Next.js injecte de manière dynamique des balises <link
rel="preload"> afin de télécharger des composants pour les navigations ultérieures.
Next.js se contente de extraire le code JavaScript, pas l'exécute. Ainsi, le contenu supplémentaire que la page préchargée pourrait demander n'est pas 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 le préchargement pour les pages rarement consultées en définissant la propriété prefetch sur <Link> sur false:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
Dans ce deuxième exemple d'application, la page index.js présente une valeur <Link> définie sur pineapple-pizza.js et 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 de développement indique que margherita.js est téléchargé, mais pas pineapple-pizza.js:
Préchargement avec 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 à un nouvel itinéraire, vous pouvez le définir dans votre code de routage personnalisé.
Lorsque vous utilisez des composants personnalisés pour le routage, vous pouvez également y ajouter un préchargement.
Pour implémenter le préchargement dans votre code de routage, utilisez la méthode prefetch de useRouter.
Examinez components/MyLink.js dans cet exemple d'application:
Le préchargement est effectué dans le hook useEffect. Si la propriété prefetch d'une <MyLink> est définie sur true, la route spécifiée dans la propriété href est préchargée lors de l'affichage de ce <MyLink>:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
Lorsque vous cliquez sur le lien, le routage est effectué dans handleClick. Un message est enregistré 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 cet exemple d'application, la page index.js comporte un <MyLink> à margherita.js et un pineapple-pizza.js. La propriété prefetch est définie sur true pour /margherita et sur false pour /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é, mais pas pineapple-pizza.js:
Lorsque vous cliquez sur l'un de ces liens, la console consigne "S'amuser avec Next.js" et accède à la nouvelle route:
Conclusion
Lorsque vous utilisez <Link>, Next.js précharge automatiquement le code JavaScript nécessaire à l'affichage de la page liée, ce qui accélère la navigation vers de nouvelles pages. Si vous utilisez le routage personnalisé, vous pouvez utiliser l'API du routeur Next.js pour implémenter le préchargement vous-même. Évitez de télécharger inutilement du contenu en désactivant le préchargement pour les pages rarement consultées.