Hier erfahren Sie, wie Next.js durch den Vorabruf von Routen die Navigation beschleunigt und wie Sie die Funktion individuell anpassen können.
Themen in dieser Anleitung
In diesem Beitrag erfahren Sie, wie das Routing in Next.js funktioniert, wie es für Geschwindigkeit optimiert wird und wie Sie es an Ihre Anforderungen anpassen.
Die Komponente „<Link>
“
In Next.js müssen Sie das Routing nicht manuell einrichten.
Next.js verwendet dateisystembasiertes Routing, sodass Sie einfach Dateien und Ordner im Verzeichnis ./pages/
erstellen können:
Wenn du verschiedene Seiten verknüpfen möchtest, verwende die Komponente <Link>
, ähnlich wie du das gute alte <a>
-Element verwendest:
<Link href="/margherita">
<a>Margherita</a>
</Link>
Wenn Sie die <Link>
-Komponente zur Navigation verwenden, übernimmt Next.js etwas mehr für Sie. Normalerweise wird eine Seite heruntergeladen, wenn Sie einem Link zu ihr folgen. Next.js ruft jedoch automatisch den JavaScript-Code, der zum Rendern der Seite erforderlich ist, vorab ab.
Wenn Sie eine Seite mit einigen Links laden, ist die Wahrscheinlichkeit groß, dass die Komponente, die dahinter steckt, bereits abgerufen wurde, wenn Sie einem Link folgen. Dies verbessert die Reaktionsschnelligkeit der Anwendung, da schneller zu neuen Seiten navigieren kann.
In der Beispiel-App unten ist die Seite index.js
mit margherita.js
mit einem <Link>
verknüpft:
Prüfen Sie mit den Chrome-Entwicklertools, ob margherita.js
vorab abgerufen wird:
1. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild
aus.
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
Klicken Sie auf den Tab Netzwerk.
Klicken Sie das Kästchen Cache deaktivieren an.
Lade die Seite neu.
Wenn Sie index.js
laden, wird auf dem Tab Network angezeigt, dass margherita.js
ebenfalls heruntergeladen wurde:
So funktioniert der automatische Prefetch
Next.js ruft nur Links im Darstellungsbereich vorab ab und verwendet die Intersection Observer API, um sie zu erkennen. Außerdem wird der Vorabruf deaktiviert, wenn die Netzwerkverbindung langsam ist oder Nutzer Save-Data
aktiviert haben. Auf Grundlage dieser Prüfungen fügt Next.js dynamisch <link
rel="preload">
-Tags ein, um Komponenten für nachfolgende Navigationen herunterzuladen.
Next.js ruft das JavaScript nur ab, führt es nicht aus. Auf diese Weise werden keine zusätzlichen Inhalte heruntergeladen, die die vorabgerufene Seite möglicherweise anfordern könnte, bis Sie den Link aufrufen.
Unnötigen Vorabruf vermeiden
Um das Herunterladen unnötiger Inhalte zu vermeiden, können Sie den Vorabruf für selten besuchte Seiten deaktivieren. Setzen Sie dazu das Attribut prefetch
für <Link>
auf false
:
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
In dieser zweiten Beispiel-App ist auf der Seite index.js
ein <Link>
auf pineapple-pizza.js
festgelegt, wobei prefetch
auf false
gesetzt ist:
Führen Sie die Schritte aus dem ersten Beispiel aus, um die Netzwerkaktivität zu überprüfen. Wenn Sie index.js
laden, wird in den Entwicklertools auf dem Tab Netzwerk angezeigt, dass margherita.js
heruntergeladen ist, pineapple-pizza.js
jedoch nicht:
Prefetching mit benutzerdefiniertem Routing
Die <Link>
-Komponente ist für die meisten Anwendungsfälle geeignet. Sie können aber auch eine eigene Komponente für das Routing erstellen. Mit der in next/router
verfügbaren Router API ist dies mit Next.js ganz einfach.
Wenn Sie etwas tun möchten (z. B. ein Formular senden), bevor Sie zu einer neuen Route wechseln, können Sie dies in Ihrem benutzerdefinierten Routingcode definieren.
Wenn Sie benutzerdefinierte Komponenten für das Routing verwenden, können Sie ihnen auch einen Vorabruf hinzufügen.
Verwenden Sie die Methode prefetch
von useRouter
, um den Vorabruf in Ihrem Routingcode zu implementieren.
Sehen Sie sich components/MyLink.js
in dieser Beispiel-App an:
Der Prefetch erfolgt innerhalb des Hooks useEffect
. Wenn die Eigenschaft prefetch
für eine <MyLink>
auf true
gesetzt ist, wird die in der Eigenschaft href
angegebene Route beim Rendern dieser <MyLink>
vorab abgerufen:
useEffect(() => {
if (prefetch) router.prefetch(href)
});
Wenn Sie auf den Link klicken, wird das Routing in handleClick
beendet. Eine Nachricht wird in der Console protokolliert und die Methode push
ruft die neue Route auf, die in href
angegeben ist:
const handleClick = e => {
e.preventDefault();
console.log("Having fun with Next.js.");
router.push(href);
};
In dieser Beispielanwendung hat die Seite index.js
eine <MyLink>
für margherita.js
und pineapple-pizza.js
. Das Attribut prefetch
ist für /margherita
auf true
und für /pineapple-pizza
auf false
gesetzt.
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />
Wenn Sie index.js
laden, wird auf dem Tab Netzwerk angezeigt, dass margherita.js
heruntergeladen wurde und pineapple-pizza.js
nicht:
Wenn Sie auf einen der Links klicken, wird in der Console „Having a fun with Next.js“ protokolliert und die neue Route aufgerufen:
Fazit
Wenn Sie <Link>
verwenden, ruft Next.js automatisch das JavaScript, das zum Rendern der verlinkten Seite erforderlich ist, vorab ab. Dadurch können neue Seiten schneller aufgerufen werden. Wenn Sie benutzerdefiniertes Routing verwenden, können Sie den Prefetch mit der Next.js Router API selbst implementieren. Vermeiden Sie das unnötige Herunterladen von Inhalten, indem Sie den Vorabruf für selten besuchte Seiten deaktivieren.