Rendering

Standardmäßig führt Next.js für jede Seite ein Pre-Rendering durch. Das bedeutet, dass Next.js HTML für jede Seite im Voraus generiert, anstatt alles clientseitig mit JavaScript zu erledigen. Pre-Rendering kann zu besserer Performance und SEO führen.

Jedes generierte HTML ist mit dem minimal notwendigen JavaScript-Code für diese Seite verknüpft. Wenn eine Seite vom Browser geladen wird, führt dieser den JavaScript-Code aus und macht die Seite vollständig interaktiv (dieser Prozess wird in React als Hydration bezeichnet).

Pre-Rendering

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

• Static Generation: Das HTML wird zum Build-Zeitpunkt generiert und bei jeder Anfrage wiederverwendet.
• Server-side Rendering: Das HTML wird bei jeder Anfrage neu generiert.

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

Aus Performance-Gründen empfehlen wir Static Generation gegenüber Server-side Rendering. Statisch generierte Seiten können ohne zusätzliche Konfiguration von CDNs zwischengespeichert werden, um die Performance zu steigern. In einigen Fällen kann Server-side Rendering jedoch die einzige Option sein.

Sie können auch clientseitiges Data Fetching in Kombination mit Static Generation oder Server-side Rendering verwenden. Das bedeutet, dass einige Teile einer Seite vollständig clientseitig mit JavaScript gerendert werden können. Weitere Informationen finden Sie in der Data Fetching-Dokumentation.