Precaricamento del percorso in Next.js

In che modo Next.js accelera le navigazioni con il pre-caricamento delle route e come personalizzarlo.

Milica Mihajlija

Cosa imparerai?

In questo post scoprirai come funziona il routing in Next.js, come è ottimizzato per la velocità e come personalizzarlo in base alle tue esigenze.

Il componente <Link>

In Next.js, non è necessario configurare il routing manualmente. Next.js utilizza il routing basato sul file system, che ti consente di creare semplicemente file e cartelle all'interno della directory ./pages/:

Per creare link a pagine diverse, utilizza il componente <Link>, in modo simile a come utilizzeresti il buon vecchio elemento <a>:

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

Quando utilizzi il componente <Link> per la navigazione, Next.js fa un po' di più per te. In genere, una pagina viene scaricata quando segui un link, ma Next.js esegue automaticamente il pre-caricamento del codice JavaScript necessario per visualizzarla.

Quando carichi una pagina con alcuni link, è probabile che, quando segui un link, il componente sottostante sia già stato recuperato. In questo modo, la reattività dell'applicazione viene migliorata velocizzando la navigazione verso nuove pagine.

Nell'app di esempio riportata di seguito, la pagina index.js rimanda a margherita.js con un <Link>:

Utilizza Chrome DevTools per verificare che margherita.js sia precompilato: 1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero .

1. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.

2. Fai clic sulla scheda Rete.

3. Seleziona la casella di controllo Disattiva cache.

4. Ricarica la pagina.

Quando carichi index.js, la scheda Rete mostra che anche margherita.js è stato scaricato:

Come funziona il precaricamento automatico

Next.js esegue il pre-caricamento solo dei link visualizzati nell'area visibile e utilizza l'API IntersectionObserver per rilevarli. Inoltre, disattiva il pre-caricamento quando la connessione di rete è lenta o se gli utenti hanno attivato Save-Data. In base a questi controlli, Next.js inietta dinamicamente i tag <link rel="preload"> per scaricare i componenti per le navigazioni successive.

Next.js recupera solo il codice JavaScript, senza eseguirlo. In questo modo, non vengono scaricati contenuti aggiuntivi che la pagina precaricata potrebbe richiedere finché non visiti il link.

Evita il pre-caricamento non necessario

Per evitare di scaricare contenuti non necessari, puoi disattivare il pre-caricamento per le pagine raramente visitate impostando la proprietà prefetch su <Link> su false:

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

In questa seconda app di esempio, la pagina index.js ha un <Link> per pineapple-pizza.js con prefetch impostato su false:

Per ispezionare l'attività di rete, segui i passaggi del primo esempio. Quando caricate index.js, la scheda Rete di DevTools mostra che margherita.js viene scaricato, ma non pineapple-pizza.js:

Precaricamento con routing personalizzato

Il componente <Link> è adatto alla maggior parte dei casi d'uso, ma puoi anche creare il tuo componente per eseguire il routing. Next.js semplifica questa operazione con l'API router disponibile in next/router. Se vuoi fare qualcosa (ad esempio inviare un modulo) prima di passare a un nuovo percorso, puoi definirlo nel codice di routing personalizzato.

Quando utilizzi componenti personalizzati per il routing, puoi aggiungere anche il prefetching. Per implementare il pre-caricamento nel codice di routing, utilizza il metodo prefetch di useRouter.

Dai un'occhiata a components/MyLink.js in questa app di esempio:

Il pre-caricamento viene eseguito all'interno del useEffect hook. Se la proprietà prefetch in un <MyLink> è impostata su true, il percorso specificato nella proprietà href viene precompilato quando viene visualizzato <MyLink>:

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

Quando fai clic sul link, il routing viene eseguito in handleClick. Viene registrato un messaggio nella console e il metodo push passa al nuovo percorso specificato in href:

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

In questa app di esempio, la pagina index.js ha un <MyLink> a margherita.js e pineapple-pizza.js. La proprietà prefetch è impostata su true il giorno /margherita e su false il giorno /pineapple-pizza.

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

Quando carichi index.js, la scheda Rete mostra che margherita.js è stato scaricato, mentre pineapple-pizza.js no:

Quando fai clic su uno dei link, la console registra "Buon divertimento con Next.js" e si apre il nuovo percorso:

Conclusione

Quando utilizzi <Link>, Next.js esegue automaticamente la prelettura del codice JavaScript necessario per visualizzare la pagina collegata, il che rende più rapida la navigazione verso nuove pagine. Se utilizzi il routing personalizzato, puoi utilizzare l'API del router Next.js per implementare il pre-caricamento. Evita di scaricare contenuti inutilmente disattivando il pre-caricamento per le pagine visitate raramente.