Acheminer le préchargement dans Next.js

Découvrez comment Next.js accélère les navigations grâce au préchargement des routes et comment le personnaliser.

Milica Mihajlija

Qu'allez-vous apprendre ?

Dans ce post, vous allez découvrir comment fonctionne le routage dans Next.js, comment il est optimisé pour une plus grande vitesse et comment le personnaliser pour répondre au mieux à vos besoins.

Composant <Link>

Dans Next.js, vous n'avez pas besoin de configurer manuellement le routage. Next.js utilise le 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 un lien vers d'autres pages, utilisez le <Link>, comme vous le feriez Utilisez 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 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 à l'affichage de la page.

Lorsque vous chargez une page contenant quelques liens, il y a de fortes chances qu'au moment où vous un lien, le composant associé a déjà été récupéré. Cela améliore la réactivité des applications en accélérant la navigation vers les nouvelles pages.

Dans l'exemple d'application ci-dessous, la page index.js renvoie vers 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. Appuyez ensuite sur Plein écran

1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.

2. Cliquez sur l'onglet Réseau.

3. Cochez la case Disable cache (Désactiver le cache).

4. Actualisez la page.

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

Fonctionnement du préchargement automatique

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

Next.js ne récupère que le code JavaScript. il ne l’exécute pas. De cette façon, ce n'est pas télécharger tout contenu supplémentaire que la page préchargée pourrait demander jusqu'à ce que vous consultiez le lien.

Éviter le préchargement inutile

Pour éviter de télécharger du contenu inutile, vous pouvez désactiver le préchargement pour pages 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 dispose d'un <Link> pour pineapple-pizza.js avec prefetch défini sur false:

Pour inspecter l'activité réseau, suivez les étapes du premier exemple. Quand ? lorsque vous chargez index.js, l'onglet Réseau des outils de développement indique que margherita.js est téléchargée, mais pineapple-pizza.js n'est pas:

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 au API de routeur disponible dans next/router. Si vous souhaitez effectuer une action (par exemple, envoyer un formulaire) avant d'accéder à une nouvelle vous pouvez le définir dans votre code de routage personnalisé.

Lorsque vous utilisez des composants personnalisés pour le routage, vous pouvez également leur 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 s'effectue useEffect crochet Si le La propriété prefetch sur une <MyLink> est définie sur true, l'itinéraire spécifié dans La propriété href est préchargée lors de l'affichage de cette <MyLink>:

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

Lorsque vous cliquez sur le lien, l'itinéraire s'effectue dans handleClick. Un message reçoit connecté à la console, et la méthode push permet d'accéder à la nouvelle route. spécifié 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 a un <MyLink> à margherita.js et pineapple-pizza.js La propriété prefetch est définie sur true dans /margherita et à false le /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 Network (Réseau) indique que margherita.js est téléchargée et pineapple-pizza.js n'est pas:

Lorsque vous cliquez sur l'un de ces liens, la console enregistre le message "Grâce à Next.js,". et accède au nouvel itinéraire:

Conclusion

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