Routen-Vorabruf in Next.js

Wie Next.js die Navigation durch das Vorabrufen von Routen beschleunigt und wie Sie das Vorabrufen anpassen können.

Milica Mihajlija

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 können.

Die Komponente <Link>

In Next.js müssen Sie das Routing nicht manuell einrichten. Next.js verwendet dateisystembasiertes Routing. Sie können also einfach Dateien und Ordner im Verzeichnis ./pages/ erstellen:

Verwenden Sie die Komponente <Link>, um Links zu verschiedenen Seiten zu erstellen. Das funktioniert ähnlich wie beim alten <a>-Element:

<Link href="/margherita">
  <a>Margherita</a>
</Link>

Wenn Sie die <Link>-Komponente für die Navigation verwenden, übernimmt Next.js einiges für Sie. Normalerweise wird eine Seite heruntergeladen, wenn Sie einem Link darauf folgen. Next.js ruft jedoch automatisch das JavaScript ab, das zum Rendern der Seite erforderlich ist.

Wenn Sie eine Seite mit wenigen Links laden, ist es wahrscheinlich, dass die Komponente hinter einem Link bereits abgerufen wurde, wenn Sie dem Link folgen. Dadurch wird die Reaktionsfähigkeit von Anwendungen verbessert, da die Navigation zu neuen Seiten schneller erfolgt.

In der Beispiel-App wird auf der Seite index.js mit einem <Link> auf margherita.js verlinkt:

So prüfen Sie mit den Chrome-Entwicklertools, ob margherita.js vorab abgerufen wird: 1. Drücken Sie App ansehen, um sich eine Vorschau der Website anzusehen. Drücken Sie dann Vollbild .

1. Öffnen Sie die Chrome-Entwicklertools.
2. Klicken Sie auf den Tab Netzwerk.
3. Klicken Sie das Kästchen Cache deaktivieren an.
4. Aktualisieren Sie die Seite.

Wenn Sie index.js laden, wird auf dem Tab Network (Netzwerk) angezeigt, dass auch margherita.js heruntergeladen wird:

So funktioniert das automatische Prefetching

Next.js ruft nur Links vorab ab, die im Viewport angezeigt werden. Dazu wird die Intersection Observer API verwendet. Außerdem wird das Prefetching deaktiviert, wenn die Netzwerkverbindung langsam ist oder wenn Nutzer Save-Data aktiviert haben. Basierend auf diesen Prüfungen fügt Next.js dynamisch <link rel="preload">-Tags ein, um Komponenten für nachfolgende Navigationsvorgänge herunterzuladen.

Next.js ruft das JavaScript nur ab, führt es aber nicht aus. So werden keine zusätzlichen Inhalte heruntergeladen, die auf der vorab abgerufenen Seite angefordert werden könnten, bis Sie den Link aufrufen.

Unnötiges Prefetching vermeiden

Um das Herunterladen unnötiger Inhalte zu vermeiden, können Sie das Prefetching für selten besuchte Seiten deaktivieren. Setzen Sie dazu die Property prefetch in <Link> auf false:

<Link href="/pineapple-pizza" prefetch={false}>
  <a>Pineapple pizza</a>
</Link>

In dieser zweiten Beispiel-App hat die Seite index.js einen <Link> bis pineapple-pizza.js mit prefetch auf false gesetzt:

Folgen Sie der Anleitung im ersten Beispiel, um die Netzwerkaktivität zu prüfen. Wenn Sie index.js laden, wird auf dem Tab Netzwerk der Entwicklertools angezeigt, dass margherita.js heruntergeladen wird, pineapple-pizza.js jedoch nicht:

Prefetch mit benutzerdefiniertem Routing

Die Komponente <Link> ist für die meisten Anwendungsfälle geeignet. Sie können aber auch eine eigene Komponente für das Routing erstellen. Next.js erleichtert dies mit der Router-API, die in next/router verfügbar ist. Wenn Sie etwas tun möchten, bevor Sie zu einer neuen Route wechseln (z. B. ein Formular senden), können Sie das in Ihrem benutzerdefinierten Routingcode definieren.

Wenn Sie benutzerdefinierte Komponenten für das Routing verwenden, können Sie auch Prefetching hinzufügen. Verwenden Sie die Methode prefetch aus useRouter, um das Prefetching in Ihrem Routing-Code zu implementieren.

Sehen Sie sich components/MyLink.js in dieser Beispiel-App an:

Das Prefetching erfolgt im Hook useEffect. Wenn die Property prefetch für ein <MyLink> auf true festgelegt ist, wird die in der Property href angegebene Route beim Rendern dieses <MyLink> vorab abgerufen:

useEffect(() => {
    if (prefetch) router.prefetch(href)
});

Wenn Sie auf den Link klicken, erfolgt das Routing in handleClick. Eine Nachricht wird in der Konsole protokolliert und mit der Methode push wird zur neuen Route navigiert, die in href angegeben ist:

const handleClick = e => {
    e.preventDefault();
    console.log("Having fun with Next.js.");
    router.push(href);
};

In dieser Beispiel-App hat die Seite index.js einen <MyLink> zu margherita.js und pineapple-pizza.js. Die Property prefetch ist auf true für /margherita und auf false für /pineapple-pizza festgelegt.

<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 beiden Links klicken, wird in der Konsole „Having fun with Next.js.“ protokolliert und zur neuen Route navigiert:

Fazit

Wenn Sie <Link> verwenden, ruft Next.js automatisch die JavaScript-Dateien ab, die zum Rendern der verlinkten Seite erforderlich sind. Dadurch wird das Aufrufen neuer Seiten beschleunigt. Wenn Sie benutzerdefiniertes Routing verwenden, können Sie die Next.js-Router-API verwenden, um das Prefetching selbst zu implementieren. Sie können unnötige Downloads von Inhalten vermeiden, indem Sie das Vorabrufen für selten besuchte Seiten deaktivieren.