Precaricamento del percorso in Next.js

In che modo Next.js velocizza la navigazione con il prefetching delle route e come personalizzarlo.

Milica Mihajlija

In questo post, scoprirai come funziona il routing in Next.js, come viene ottimizzato per la velocità e come personalizzarlo per adattarlo al meglio alle tue esigenze.

Il componente <Link>

In Next.js, non è necessario configurare manualmente il routing. Next.js utilizza il routing basato sul file system, che ti consente di creare 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 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. Normalmente, una pagina viene scaricata quando segui un link che la rimanda, ma Next.js precarica automaticamente il JavaScript necessario per il rendering della pagina.

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 migliora perché la navigazione nelle nuove pagine è più rapida.

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

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

1. Apri Chrome 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 precarica solo i link visualizzati nel riquadro e utilizza l'API Intersection Observer per rilevarli. Inoltre, disattiva il precaricamento quando la connessione di rete è lenta o quando gli utenti hanno attivato Save-Data. In base a questi controlli, Next.js inserisce dinamicamente i tag <link rel="preload"> per scaricare i componenti per le navigazioni successive.

Next.js recupera solo il codice JavaScript, non lo esegue. In questo modo, non scarica contenuti aggiuntivi che la pagina precaricata potrebbe richiedere finché non visiti il link.

Evita il prefetching non necessario

Per evitare di scaricare contenuti non necessari, puoi disattivare il recupero anticipato per le pagine visitate raramente 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> a pineapple-pizza.js con prefetch impostato su false:

Per esaminare l'attività di rete, segui i passaggi del primo esempio. Quando carichi index.js, la scheda Rete di DevTools mostra che margherita.js è scaricato, ma pineapple-pizza.js no:

Prefetch 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 una nuova route, puoi definirlo nel codice di routing personalizzato.

Quando utilizzi componenti personalizzati per il routing, puoi aggiungervi anche il prefetching. Per implementare il recupero anticipato nel codice di routing, utilizza il metodo prefetch di useRouter.

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

Il prefetching viene eseguito all'interno dell'hook useEffect. Se la proprietà prefetch di un <MyLink> è impostata su true, il percorso specificato nella proprietà href viene precaricato quando viene visualizzato il <MyLink>:

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

Quando fai clic sul link, il routing viene eseguito in handleClick. Un messaggio viene registrato nella console e il metodo push passa alla nuova route specificata 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 è scaricato e pineapple-pizza.js no:

Quando fai clic su uno dei due link, nei log della console viene visualizzato il messaggio "Having fun with Next.js." (Divertiti con Next.js.) e viene visualizzata la nuova route:

Conclusione

Quando utilizzi <Link>, Next.js precarica automaticamente il JavaScript necessario per eseguire il rendering della pagina collegata, il che velocizza la navigazione nelle nuove pagine. Se utilizzi il routing personalizzato, puoi utilizzare l'API router di Next.js per implementare il precaricamento autonomamente. Evita di scaricare contenuti inutilmente disattivando il recupero anticipato per le pagine visitate raramente.