Zwei Formen des Pre-rendering

Next.js bietet zwei Formen des Pre-rendering: Static Generation und Server-side Rendering. Der Unterschied liegt darin, wann das HTML für eine Seite generiert wird.

• Static Generation ist die Pre-rendering-Methode, die das HTML zur Build-Zeit generiert. Das vorgerenderte HTML wird dann bei jeder Anfrage wiederverwendet.
• Server-side Rendering ist die Pre-rendering-Methode, die das HTML bei jeder Anfrage neu generiert.

Im Entwicklungsmodus (wenn Sie npm run dev oder yarn dev ausführen), werden Seiten bei jeder Anfrage vorgerendert. Dies gilt auch für die Static Generation, um die Entwicklung zu vereinfachen. In der Produktionsumgebung erfolgt Static Generation nur einmal zur Build-Zeit und nicht bei jeder Anfrage.

Pro-Seite-Basis

Wichtig ist, dass Next.js Ihnen die Wahl lässt, welche Pre-rendering-Methode für jede Seite verwendet wird. Sie können eine "hybride" Next.js-App erstellen, indem Sie für die meisten Seiten Static Generation und für andere Server-side Rendering verwenden.

Wann sollte man Static Generation vs. Server-side Rendering verwenden?

Wir empfehlen, wann immer möglich Static Generation (mit oder ohne Daten) zu verwenden, da Ihre Seite einmal gebaut und von einer CDN bereitgestellt werden kann, was sie viel schneller macht als eine Seite, die bei jeder Anfrage vom Server gerendert wird.

Sie können Static Generation für viele Arten von Seiten verwenden, einschließlich:

• Marketing-Seiten
• Blog-Beiträge
• E-Commerce-Produktlisten
• Hilfe- und Dokumentationsseiten

Sie sollten sich fragen: "Kann ich diese Seite vor der Anfrage eines Nutzers vorrendern?" Wenn die Antwort ja lautet, sollten Sie Static Generation wählen.

Andererseits ist Static Generation keine gute Idee, wenn Sie eine Seite nicht vor der Anfrage eines Nutzers vorrendern können. Vielleicht zeigt Ihre Seite häufig aktualisierte Daten an, und der Seiteninhalt ändert sich bei jeder Anfrage.

In diesem Fall können Sie Server-side Rendering verwenden. Es wird langsamer sein, aber die vorgerenderte Seite wird immer auf dem neuesten Stand sein. Alternativ können Sie das Pre-rendering überspringen und clientseitiges JavaScript verwenden, um häufig aktualisierte Daten zu laden.

Wir konzentrieren uns auf Static Generation

In dieser Lektion konzentrieren wir uns auf Static Generation. Auf der nächsten Seite werden wir über Static Generation mit und ohne Daten sprechen.