Pre-Rendering
Bevor wir über Datenabruf sprechen, lassen Sie uns eines der wichtigsten Konzepte in Next.js besprechen: Pre-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 Leistung und verbessertem 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, wird ihr JavaScript-Code ausgeführt und macht die Seite vollständig interaktiv. (Dieser Prozess wird Hydration genannt.)
Überprüfen, ob Pre-Rendering stattfindet
Sie können überprüfen, ob Pre-Rendering stattfindet, indem Sie folgende Schritte ausführen:
- Deaktivieren Sie JavaScript in Ihrem Browser. (Hier erfahren Sie, wie das in Chrome geht).
- Versuchen Sie, auf diese Seite zuzugreifen (das Endergebnis dieses Tutorials).
Sie sollten sehen, dass Ihre App ohne JavaScript gerendert wird. Das liegt daran, dass Next.js die App in statisches HTML pre-rendered, sodass Sie die Benutzeroberfläche der App sehen können, ohne JavaScript ausführen zu müssen.
Hinweis: Sie können die obigen Schritte auch auf
localhostausprobieren, aber CSS wird nicht geladen, wenn Sie JavaScript deaktivieren.
Wenn Ihre App eine reine React.js-App (ohne Next.js) ist, gibt es kein Pre-Rendering, sodass Sie die App nicht sehen können, wenn Sie JavaScript deaktivieren. Beispiel:
- Aktivieren Sie JavaScript in Ihrem Browser und rufen Sie diese Seite auf. Dies ist eine reine React.js-App, die mit Create React App erstellt wurde.
- Deaktivieren Sie nun JavaScript und rufen Sie dieselbe Seite erneut auf.
- Sie werden die App nicht mehr sehen – stattdessen wird die Meldung "Sie müssen JavaScript aktivieren, um diese App auszuführen" angezeigt. Das liegt daran, dass die App nicht in statisches HTML pre-rendered wurde.
Zusammenfassung: Pre-Rendering vs. Kein Pre-Rendering
Hier ist eine schnelle grafische Zusammenfassung:
Als nächstes sprechen wir über zwei Formen des Pre-Renderings in Next.js.