Automatische statische Optimierung

Next.js erkennt automatisch, dass eine Seite statisch ist (vorge-rendert werden kann), wenn sie keine blockierenden Datenanforderungen hat. Diese Feststellung erfolgt durch das Fehlen von getServerSideProps und getInitialProps auf der Seite.

Diese Funktion ermöglicht es Next.js, hybride Anwendungen zu erstellen, die sowohl serverseitig gerenderte als auch statisch generierte Seiten enthalten.

Wichtig zu wissen: Statisch generierte Seiten bleiben reaktiv. Next.js wird Ihre Anwendung clientseitig hydrieren, um ihr vollständige Interaktivität zu geben.

Einer der Hauptvorteile dieser Funktion ist, dass optimierte Seiten keine serverseitigen Berechnungen benötigen und sofort aus mehreren CDN-Standorten an den Endnutzer gestreamt werden können. Das Ergebnis ist ein extrem schnelles Ladeerlebnis für Ihre Nutzer.

Funktionsweise

Wenn getServerSideProps oder getInitialProps auf einer Seite vorhanden ist, wird Next.js die Seite bedarfsgerecht bei jeder Anfrage rendern (d.h. Serverseitiges Rendering (SSR)).

Wenn dies nicht der Fall ist, wird Next.js Ihre Seite automatisch statisch optimieren, indem die Seite zu statischem HTML vorge-rendert wird.

Während des Vor-Renderings ist das query-Objekt des Routers leer, da wir in dieser Phase keine query-Informationen bereitstellen können. Nach der Hydrierung löst Next.js ein Update Ihrer Anwendung aus, um die Routenparameter im query-Objekt bereitzustellen.

Die Fälle, in denen die Query nach der Hydrierung aktualisiert wird und ein erneutes Rendering auslöst, sind:

• Die Seite ist eine dynamische Route.
• Die Seite hat Query-Werte in der URL.
• In Ihrer next.config.js sind Rewrites konfiguriert, da diese Parameter enthalten können, die geparst und in der query bereitgestellt werden müssen.

Um festzustellen, ob die Query vollständig aktualisiert und einsatzbereit ist, können Sie das isReady-Feld von next/router nutzen.

Wichtig zu wissen: Parameter, die mit dynamischen Routen zu einer Seite hinzugefügt werden, die getStaticProps verwendet, sind immer im query-Objekt verfügbar.

next build erzeugt .html-Dateien für statisch optimierte Seiten. Zum Beispiel wäre das Ergebnis für die Seite pages/about.js:

.next/server/pages/about.html

Wenn Sie der Seite getServerSideProps hinzufügen, wird sie stattdessen als JavaScript erzeugt:

.next/server/pages/about.js

Einschränkungen

• Wenn Sie eine benutzerdefinierte App mit getInitialProps haben, wird diese Optimierung für Seiten ohne statische Generierung (Static Generation) deaktiviert.
• Wenn Sie eine benutzerdefinierte Document mit getInitialProps haben, stellen Sie sicher, dass Sie prüfen, ob ctx.req definiert ist, bevor Sie davon ausgehen, dass die Seite serverseitig gerendert wird. ctx.req ist undefined für vorge-renderte Seiten.
• Vermeiden Sie die Verwendung des asPath-Werts von next/router im Rendering-Baum, bis das isReady-Feld des Routers true ist. Statisch optimierte Seiten kennen asPath nur auf dem Client und nicht auf dem Server, daher kann seine Verwendung als Prop zu Fehlern durch Nichtübereinstimmung führen. Das Beispiel active-class-name zeigt eine Möglichkeit, asPath als Prop zu verwenden.