Rendering
Standardmäßig rendert Next.js jede Seite vorab. Das bedeutet, Next.js generiert HTML für jede Seite im Voraus, anstatt dies durch clientseitiges JavaScript zu erledigen. Vorab-Rendering kann zu besserer Leistung und SEO führen.
Jedes generierte HTML wird mit minimalem JavaScript-Code verknüpft, der für diese Seite erforderlich ist. Wenn eine Seite vom Browser geladen wird, läuft der JavaScript-Code und macht die Seite vollständig interaktiv (dieser Vorgang wird in React als Hydration bezeichnet).
Vorab-Rendering
Next.js verfügt über zwei Formen des Vorab-Renderings: Statische Generierung und Server-Side-Rendering. Der Unterschied liegt im Zeitpunkt der HTML-Generierung für eine Seite.
- Statische Generierung: Das HTML wird zum Erstellungszeitpunkt generiert und bei jeder Anfrage wiederverwendet.
- Server-Side-Rendering: Das HTML wird bei jeder Anfrage generiert.
Wichtig ist, dass Next.js es Ihnen ermöglicht, für jede Seite die gewünschte Vorab-Rendering-Form zu wählen. Sie können eine "Hybrid"-Next.js-App erstellen, indem Sie Statische Generierung für die meisten Seiten verwenden und Server-Side-Rendering für andere.
Wir empfehlen aus Leistungsgründen die Verwendung von Statischer Generierung gegenüber Server-Side-Rendering. Statisch generierte Seiten können von CDN ohne zusätzliche Konfiguration zwischengespeichert werden, um die Leistung zu verbessern. In einigen Fällen kann jedoch Server-Side-Rendering die einzige Option sein.
Sie können auch clientseitiges Datenabrufen zusammen mit Statischer Generierung oder Server-Side-Rendering verwenden. Das bedeutet, dass einige Teile einer Seite vollständig durch clientseitiges JavaScript gerendert werden können. Weitere Informationen finden Sie in der Datenabruf-Dokumentation.