Precaricamento del percorso in Next.js

Scopri come Next.js velocizza la navigazione con il precaricamento del percorso e come personalizzarlo.

Milica Mihajlija

Cosa imparerai a fare?

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 devi configurare manualmente il routing. Next.js utilizza il routing basato su file system, che consente di creare file e cartelle all'interno della directory ./pages/:

Per creare un link a pagine diverse, utilizza il componente <Link> in modo simile a come useresti l'elemento <a> preesistente:

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

Quando utilizzi il componente <Link> per la navigazione, Next.js ti fa un po' di più. Normalmente, una pagina viene scaricata quando segui un link alla pagina, ma Next.js precarica automaticamente il codice JavaScript necessario per il rendering della pagina.

Quando carichi una pagina con pochi link, è probabile che, nel momento in cui segui un link, il componente sottostante sia già stato recuperato. Ciò migliora la reattività dell'applicazione 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 precaricato: 1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi 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 Disabilita cache.

4. Ricarica la pagina.

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

Come funziona il precaricamento automatico

Next.js precarica solo i link che vengono mostrati nell'area visibile e utilizza l'API Intersection Observationr per rilevarli. Inoltre, disabilita 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, finché non fai clic sul link, non vengono scaricati contenuti aggiuntivi che la pagina precaricata potrebbe richiedere.

Evita precaricamenti superflui

Per evitare di scaricare contenuti non necessari, puoi disattivare il precaricamento 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>-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 indica che margherita.js è stato scaricato, mentre pineapple-pizza.js non è:

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 il tutto grazie all'API router disponibile in next/router. Se vuoi compiere un'azione (ad esempio, inviare un modulo) prima di accedere a una nuova route, puoi definirla nel codice di routing personalizzato.

Quando utilizzi componenti personalizzati per il routing, puoi aggiungere anche il precaricamento. Per implementare il precaricamento nel codice di routing, utilizza il metodo prefetch da useRouter.

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

Il precaricamento viene eseguito all'interno dell'hook useEffect. Se la proprietà prefetch in una <MyLink> è impostata su true, la route specificata nella proprietà href viene precaricata quando viene eseguito il rendering di questo <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 su /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 non è:

Quando fai clic su uno dei due link, la console registra la dicitura "Divertirsi con Next.js" e apre la nuova route:

Conclusione

Quando utilizzi <Link>, Next.js precarica automaticamente il codice JavaScript necessario per visualizzare la pagina collegata, velocizzando così il passaggio a nuove pagine. Se utilizzi il routing personalizzato, puoi utilizzare l'API del router Next.js per implementare il precaricamento. Evita di scaricare contenuti inutilmente disattivando il precaricamento per le pagine visitate raramente.