Scopri come Next.js velocizza la navigazione con il precaricamento del percorso e come personalizzarlo.
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
.
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
Fai clic sulla scheda Rete.
Seleziona la casella di controllo Disabilita cache.
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.