Automatische statische Optimierung

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

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

Statisch generierte Seiten bleiben reaktiv: Next.js hydriert Ihre Anwendung client-seitig, um ihr vollständige Interaktivität zu verleihen.

Einer der Hauptvorteile dieser Funktion ist, dass optimierte Seiten keine server-seitigen Berechnungen erfordern und sofort aus mehreren CDN-Standorten an den Endbenutzer 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 auf bedarfsgerechtes Rendering pro Anfrage umschalten (d.h. Server-Side Rendering).

Falls dies nicht der Fall ist, wird Next.js Ihre Seite automatisch statisch optimieren, indem die Seite zu statischem HTML vorgerendert wird.

Während des Vorrenderns ist das query-Objekt des Routers leer, da wir in dieser Phase keine query-Informationen bereitstellen können. Nach der Hydration 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 Hydration 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.

Wissenswert: 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 ausgegeben, etwa so:

.next/server/pages/about.js

Einschränkungen

• Wenn Sie eine benutzerdefinierte App mit getInitialProps haben, wird diese Optimierung für Seiten ohne 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 server-seitig gerendert wird. ctx.req ist undefined für vorgerenderte 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 führen. Das active-class-name-Beispiel zeigt eine Möglichkeit, asPath als Prop zu verwenden.