In che modo Next.js accelera le navigazioni con il precaricamento dei percorsi e come personalizzarlo.
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 manualmente il routing.
Next.js utilizza il routing basato su file system, che consente di creare semplicemente file e cartelle
all'interno della directory ./pages/
:
![Screenshot della directory delle pagine contenente tre file: index.js, margherita.js e pineapple-pizza.js.](https://web.developers.google.cn/static/articles/route-prefetching-in-nextjs/image/screenshot-the-pages-dir-81addfb477754.png?authuser=5&hl=it)
Per inserire link a pagine diverse, utilizza la
<Link>
, in modo simile a come faresti
utilizza il buon vecchio elemento <a>
:
<Link href="/margherita">
<a>Margherita</a>
</Link>
Quando utilizzi il componente <Link>
per la navigazione, Next.js esegue alcune
di più per te. Normalmente una pagina viene scaricata quando si segue un link che rimanda a questa pagina, ma
Next.js precarica automaticamente il codice JavaScript necessario per il rendering della pagina.
Quando carichi una pagina con pochi link, è probabile che quando procedi un link, il componente alla base è già stato recuperato. Ciò migliora la reattività delle applicazioni 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 stato precaricato:
1. Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
.
- Premi "Ctrl+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 margherita.js
è
scaricati anche:
Come funziona il precaricamento automatico
Next.js precarica solo i link che appaiono nell'area visibile e utilizza la sezione Intersezione
API Observer
per rilevarle. Viene inoltre disattivato il precaricamento quando la connessione di rete è lenta
o quando gli utenti hanno
Save-Data
attivata. In base a questi controlli, Next.js inserisce dinamicamente i tag <link
rel="preload">
per scaricare i componenti
le navigazioni successive.
Next.js carica solo il codice JavaScript; non lo esegue. In questo modo scaricare eventuali contenuti aggiuntivi che la pagina precaricata potrebbe richiedere finché non visiti il link.
Evita precaricamenti non necessari
Per evitare di scaricare contenuti non necessari, puoi disattivare il precaricamento per
pagine visitate impostando la proprietà prefetch
per <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 controllare l'attività di rete, segui i passaggi del primo esempio. Quando
carichi index.js
, la scheda Rete DevTools indica che margherita.js
è
scaricato, ma 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 questo passaggio grazie alla
l'API router disponibile in next/router
.
Se vuoi eseguire un'azione (ad esempio inviare un modulo) prima di accedere a un nuovo
di routing personalizzato, puoi definirlo nel codice di routing personalizzato.
Quando utilizzi componenti personalizzati per il routing, puoi anche aggiungere il precaricamento a questi componenti.
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
useEffect
gancio. Se
La proprietà prefetch
su <MyLink>
è impostata su true
, il percorso specificato in
La proprietà href
viene precaricata quando viene visualizzato <MyLink>
:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
Quando fai clic sul link, il routing viene completato in handleClick
. Un messaggio viene
connesso alla console e il metodo push
passa alla nuova route
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 valore <MyLink>
per margherita.js
e
pineapple-pizza.js
. La proprietà prefetch
è impostata su true
in /margherita
e alle 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
non è:
Quando fai clic su uno dei link, nella console viene visualizzato il messaggio "Divertiti con Next.js". e passa al nuovo percorso:
Conclusione
Quando utilizzi <Link>
, Next.js precarica automaticamente il codice JavaScript necessario per
visualizzare la pagina collegata, velocizzando così la navigazione verso le nuove pagine. Se
routing personalizzato, puoi utilizzare l'API Next.js router per implementare
eseguendo il precaricamento di te. Per evitare di scaricare contenuti inutilmente, disattivali
il precaricamento per le pagine visitate raramente.