Routen-Vorabruf in Next.js

Hier erfahren Sie, wie Next.js durch den Vorabruf von Routen die Navigation beschleunigt und wie Sie die Funktion individuell anpassen können.

Milica Mihajlija

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.

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:

Screenshot des Seitenverzeichnisses mit den drei Dateien „index.js“, „margherita.js“ und „anaapple-pizza.js“

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 Vollbild aus.

  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.

  2. Klicken Sie auf den Tab Netzwerk.

  3. Klicken Sie das Kästchen Cache deaktivieren an.

  4. Lade die Seite neu.

Wenn Sie index.js laden, wird auf dem Tab Network angezeigt, dass margherita.js ebenfalls heruntergeladen wurde:

Tab „Network“ der Entwicklertools mit hervorgehobenem „margherita.js“.

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:

Tab „Network“ der Entwicklertools mit hervorgehobenem „margherita.js“.

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:

Tab „Network“ der Entwicklertools mit hervorgehobenem „margherita.js“.

Wenn Sie auf einen der Links klicken, wird in der Console „Having a fun with Next.js“ protokolliert und die neue Route aufgerufen:

Entwicklertools-Konsole mit der Meldung „Spaß mit Next.js“

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.