Precaricamento del percorso in Next.js

In che modo Next.js accelera le navigazioni con il precaricamento dei percorsi 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 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/:

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 .

1. Premi "Ctrl+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 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.