Einführung in die Navigation in NextJS

In diesem Abschnitt des Lehrbuchs sprechen wir über die Funktionsweise von Links in NextJS.

Lassen Sie uns zunächst besprechen, was so besonders an Links ist. Wir betrachten sie in verschiedenen Ansätzen zur Erstellung einer Website.

Website mit React

Nehmen wir an, Sie haben eine Website mit React. Wie bekannt ist, handelt es sich bei React um eine SPA - eine Website, bei der der Benutzer immer auf einer Seite bleibt. Sie können den React Router einbinden und der Benutzer wird denken, er navigiere durch verschiedene Seiten, obwohl er sich physisch auf einer Datei befindet.

Dabei wird der Benutzer auf Links klicken, es wird ihm vorkommen, als ob er auf eine andere Seite gelangt, aber die Website-Seite im Browser wird nicht neu geladen - React wird dynamisch das generieren, was der Benutzer auf dem Bildschirm sieht.

In diesem Schema erhält der Benutzer das Layout der Website beim ersten Aufruf der Seite, und dann werden Teile der Website einfach über JavaScript ausgetauscht. Dabei kann die Website Daten vom Server über AJAX anfordern.

Dieser Ansatz verringert die Belastung des Hostings (dessen Ressourcen unser Geld kosten), sowie die Belastung des Internetkanals des Users.

Aber dieser Ansatz hat einen Nachteil - das Problem mit SEO. Zwar hat die Website eine Reihe von Links, und in der Adressleiste ändert sich etwas, und man kann sogar einen Link zu einer bestimmten Seite der Website per Messenger verschicken. Allerdings wird der Seiteninhalt dynamisch auf dem Client generiert und Suchmaschinen sind nicht in der Lage, dies zu verarbeiten. Daher wird eine solche Website nicht gefunden werden.

Allerdings sind nicht alle Websites für die Promotion in Suchmaschinen bestimmt. Und wenn Ihre es nicht ist, dann ist dieses Schema durchaus brauchbar für Sie.

Website mit Backend

Nehmen wir an, Ihre Website ist mit einer der Backend-Sprachen erstellt. Zum Beispiel mit PHP.

In diesem Fall, wenn der Benutzer auf Links klickt, wird die Website-Seite jedes Mal vollständig geladen.

Das Problem ist, dass ein wesentlicher Teil der Seite beim User bereits vorhanden ist. Denn, wie Sie bereits wissen, ändert sich auf der Seite normalerweise nur der Inhalt und die Metadaten, während alles andere unverändert bleibt.

Warum sollten wir den Rest herunterladen, wenn sich nur der Inhalt geändert hat? Dies erzeugt eine erhöhte Belastung für den Server und den Internetkanal.

Es gibt noch ein weiteres Problem. Nehmen wir an, auf der Seite, die wir erhalten, befindet sich im Inhalt eine Liste von Produkten, wie in einem Online-Shop. Offensichtlich hat jedes Produkt das gleiche Layout. Es wäre optimaler, nur die Produktdaten und die Ausgabevorlage für das Produkt herunterzuladen. Und dann auf dem Client jedes Produkt in dieser Vorlage auszugeben. Aber wir laden die Produkte zusammen mit dem sich wiederholenden Layout des Produkts herunter.

Zusammenfassend: Wenn wir eine Website mit purem Backend haben, übertragen wir viele überflüssige Daten über das Netzwerk.

Allerdings haben wir in diesem Fall kein Problem mit SEO. Für die angefragte URL wird immer statischer Inhalt geliefert, den Suchmaschinen verstehen.

Website mit NextJS

NextJS kombiniert beide Ansätze. Wenn ein User eine URL direkt in die Adressleiste eingibt, erhält er als Antwort statischen Inhalt der Seite.

Wenn der Benutzer jedoch beginnt, auf Links auf unserer Website zu klicken, wird die Seite nicht vollständig aktualisiert, sondern die vom Benutzer benötigten Daten werden per AJAX nachgeladen.

Wenn eine Suchmaschine durch unsere Website navigiert, sieht sie den für sie benötigten statischen Inhalt. Und wenn ein User durch unsere Website navigiert, verhält sich unsere Website wie eine SPA.

Und, das Wichtigste: NextJS erledigt all dies automatisch! Wir müssen uns nicht darum kümmern - es erledigt alles von selbst. Wunderbar!

In den folgenden Lektionen werden wir untersuchen, wie man NextJS dazu bringt, auf die beschriebene Weise zu funktionieren.