Next.js beschleunigt die Navigation mit dem Routen-Vorabruf und zeigt Ihnen, wie Sie diese Funktion anpassen können.
Themen in dieser Anleitung
In diesem Beitrag erfahren Sie, wie das Routing in Next.js funktioniert, wie es für die Geschwindigkeit optimiert wird und wie Sie es optimal an Ihre Anforderungen anpassen können.
Komponente „<Link>
“
In Next.js müssen Sie das Routing nicht manuell einrichten.
Next.js verwendet dateisystembasiertes Routing, sodass Sie einfach Dateien und Ordner erstellen können.
im Verzeichnis ./pages/
:
![Screenshot des Seitenverzeichnisses mit drei Dateien: „index.js“, „margherita.js“ und „pineapple-pizza.js“.](https://web.developers.google.cn/static/articles/route-prefetching-in-nextjs/image/screenshot-the-pages-dir-81addfb477754.png?authuser=6&hl=de)
Wenn Sie auf verschiedene Seiten verlinken möchten, verwenden Sie das
<Link>
-Komponente.
Verwende das alte <a>
-Element:
<Link href="/margherita">
<a>Margherita</a>
</Link>
Wenn Sie die Komponente „<Link>
“ für die Navigation verwenden, ist „Next.js“ ein wenig
noch mehr für Sie. Normalerweise wird eine Seite heruntergeladen, wenn Sie einem Link zu dieser Seite folgen.
Next.js ruft den JavaScript-Code, der zum Rendern der Seite erforderlich ist, automatisch ab.
Wenn Sie eine Seite mit einigen Links laden, ist es wahrscheinlich, dass Sie verknüpft ist, wurde die dahinter liegenden Komponente bereits abgerufen. Dadurch wird die Reaktionszeit von Anwendungen, indem sie das Navigieren zu neuen Seiten beschleunigt.
In der Beispiel-App unten verweist die index.js
Seite auf margherita.js
mit einem
<Link>
:
Prüfen Sie mit den Chrome-Entwicklertools, ob margherita.js
vorab abgerufen wurde:
1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann
Vollbild
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Klicken Sie das Kästchen Cache deaktivieren an.
Lade die Seite neu.
Beim Laden von index.js
wird auf dem Tab Network angezeigt, dass margherita.js
auch heruntergeladen:
Funktionsweise des automatischen Vorabrufs
Next.js ruft nur Links im Darstellungsbereich vorab ab und verwendet die Schnittstelle
Observer API
um sie zu erkennen. Außerdem wird der Vorabruf deaktiviert, wenn die Netzwerkverbindung langsam ist.
oder wenn Nutzende
Save-Data
aktiviert ist. Auf Grundlage dieser Prüfungen fügt Next.js dynamisch <link
rel="preload">
-Tags ein, um Komponenten für
anschließenden Navigationen.
Next.js ruft nur den JavaScript-Code ab. werden sie nicht ausgeführt. Auf diese Weise ist es nicht Zusätzliche Inhalte herunterladen, die von der vorabgerufenen Seite möglicherweise angefordert werden, bis Sie auf den Link.
Unnötigen Vorabruf vermeiden
Um das Herunterladen unnötiger Inhalte zu vermeiden, können Sie den Vorabruf für selten
besuchten Seiten, indem Sie die Eigenschaft prefetch
auf <Link>
auf false
setzen:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
In dieser zweiten Beispiel-App hat die Seite index.js
einen <Link>
, der
pineapple-pizza.js
, wobei prefetch
auf false
festgelegt ist:
Führen Sie die Schritte aus dem ersten Beispiel aus, um die Netzwerkaktivität zu überprüfen. Wann?
laden Sie index.js
, wird auf dem Tab Network der Entwicklertools angezeigt, dass margherita.js
heruntergeladen, pineapple-pizza.js
jedoch nicht:
Prefetching mit benutzerdefiniertem Routing
Die Komponente „<Link>
“ eignet sich für die meisten Anwendungsfälle, Sie können aber auch
Komponente für das Routing verwenden. Mit Next.js ist das ganz einfach:
Router API in next/router
verfügbar.
Wenn Sie eine Aktion ausführen möchten (z. B. ein Formular senden), bevor Sie ein neues
können Sie dies in Ihrem benutzerdefinierten Routingcode festlegen.
Wenn Sie benutzerdefinierte Komponenten für das Routing verwenden, können Sie diesen auch einen Vorabruf hinzufügen.
Verwenden Sie die Methode prefetch
von
useRouter
.
Sehen Sie sich components/MyLink.js
in dieser Beispiel-App an:
Der Vorabruf erfolgt innerhalb der
useEffect
-Hook. Wenn die
Die Eigenschaft prefetch
für eine <MyLink>
ist auf true
gesetzt. Dies entspricht der Route, die im
Die Property href
wird vorab abgerufen, wenn <MyLink>
gerendert wird:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
Wenn Sie auf den Link klicken, ist die Weiterleitung in handleClick
abgeschlossen. Eine Nachricht erhält
wird in der Konsole protokolliert und die Methode push
ruft die neue Route
angegeben in href
:
const handleClick = e => {
e.preventDefault();
console.log("Having fun with Next.js.");
router.push(href);
};
In dieser Beispielanwendung hat die Seite index.js
einen <MyLink>
zu margherita.js
und
pineapple-pizza.js
. Das Attribut prefetch
ist für /margherita
auf true
gesetzt
und false
am /pineapple-pizza
.
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />
Beim Laden von index.js
wird auf dem Tab Network angezeigt, dass margherita.js
heruntergeladen und pineapple-pizza.js
ist nicht:
Wenn Sie auf einen der Links klicken, protokolliert die Console die Meldung "Ich habe Spaß mit Next.js". und navigiert zur neuen Route:
Fazit
Wenn Sie <Link>
verwenden, ruft Next.js automatisch den JavaScript-Code ab, der zum
die verlinkte Seite rendern, wodurch das Navigieren zu neuen Seiten beschleunigt wird. Wenn Sie
benutzerdefinierten Routings verwenden, können Sie die Next.js Router API verwenden, um
sich selbst vorab abzurufen. Vermeiden Sie unnötiges Herunterladen von Inhalten, indem Sie
-Vorabruf für selten besuchte Seiten.