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 serverseitig gerenderte als auch statisch generierte Seiten enthalten.

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

Einer der Hauptvorteile dieser Funktion ist, dass optimierte Seiten keine serverseitigen Berechnungen benötigen und sofort vom Endnutzer von mehreren CDN-Standorten aus 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, schaltet Next.js auf bedarfsgerechtes Rendern pro Anfrage um (was Serverseitiges Rendering (SSR) 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 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 weiteres Rendern auslöst, sind:

• Die Seite ist eine dynamische Route.
• Die Seite hat Query-Werte in der URL.
• Rewrites sind in Ihrer next.config.js 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 nutzbar 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:

.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 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 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 Mismatch-Fehlern führen. Das active-class-name-Beispiel zeigt eine Möglichkeit, asPath als Prop zu verwenden.