Découvrez comment Next.js accélère les navigations grâce au préchargement des routes et comment le personnaliser.
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/
:
![Capture d'écran du répertoire "pages" contenant trois fichiers: index.js, margherita.js et pinapple-pizza.js](https://web.dev/static/articles/route-prefetching-in-nextjs/image/screenshot-the-pages-dir-81addfb477754.png?authuser=6&hl=fr)
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, cela signifie que 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
- 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 Disable cache (Désactiver le cache).
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.