Routen-Vorabruf in Next.js

Next.js beschleunigt die Navigation mit dem Routen-Vorabruf und zeigt Ihnen, wie Sie diese Funktion 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 die Geschwindigkeit optimiert wird und wie Sie es optimal an Ihre Anforderungen anpassen können.

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“.

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 Vollbild

  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem 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.

Beim Laden von index.js wird auf dem Tab Network angezeigt, dass margherita.js auch heruntergeladen:

Tab „Network“ in den Entwicklertools mit hervorgehobenem „margherita.js“

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:

Tab „Network“ in den Entwicklertools mit hervorgehobenem „margherita.js“

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:

Tab „Network“ in den Entwicklertools mit hervorgehobenem „margherita.js“

Wenn Sie auf einen der Links klicken, protokolliert die Console die Meldung "Ich habe Spaß mit Next.js". und navigiert zur neuen Route:

In der Entwicklertools-Konsole wird die Meldung „Spaß mit Next.js“ angezeigt.

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.