Automatische statische Optimierung

Next.js stellt automatisch fest, dass eine Seite statisch (vorgerendert werden kann) ist, wenn sie keine blockierenden Datenanforderungen hat. Diese Feststellung wird durch das Fehlen von getServerSideProps und getInitialProps auf der Seite getroffen.

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

Statisch generierte Seiten sind dennoch reaktiv: Next.js wird Ihre Anwendung clientseitig hydratisieren, um ihr volle Interaktivität zu verleihen.

Einer der Hauptvorteile dieser Funktion ist, dass optimierte Seiten keine serverseitigen Berechnungen erfordern und sofort von mehreren CDN-Standorten an den Endbenutzer gestreamt werden können. Das Ergebnis ist ein extrem schnelles Laderlebnis für Ihre Benutzer.

Funktionsweise

Wenn getServerSideProps oder getInitialProps auf einer Seite vorhanden ist, wird Next.js auf Rendering der Seite bei Bedarf pro Anfrage umschalten (was Server-Side Rendering bedeutet).

Wenn 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 wird das query-Objekt des Routers leer sein, da während dieser Phase keine query-Informationen zur Verfügung stehen. Nach der Hydratisierung wird Next.js ein Update Ihrer Anwendung auslösen, um die Routeparameter im query-Objekt bereitzustellen.

Die Fälle, in denen die Abfrage nach der Hydratisierung aktualisiert wird und einen weiteren Render auslöst, sind:

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

Um unterscheiden zu können, ob die Abfrage vollständig aktualisiert und zur Verwendung bereit ist, können Sie das isReady-Feld von next/router nutzen.

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

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

.next/server/pages/about.html

Und wenn Sie getServerSideProps zur Seite hinzufügen, wird sie dann JavaScript sein, wie folgt:

.next/server/pages/about.js

Einschränkungen

• Wenn Sie eine benutzerdefinierte App mit getInitialProps haben, wird diese Optimierung für Seiten ohne Statische Generierung deaktiviert.
• Wenn Sie ein benutzerdefiniertes 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 wird als undefined für Seiten angezeigt, die vorgerendert werden.
• Vermeiden Sie die Verwendung des asPath-Wertes 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, sodass die Verwendung als Prop zu Abweichungsfehlern führen kann. Das active-class-name-Beispiel demonstriert eine Möglichkeit, asPath als Prop zu verwenden.