Server Components und Streaming-Grenzen einsetzen, um Client-Arbeit zu reduzieren und nützliche, crawlbare Inhalte zu erhalten.
Der moderne Next.js App Router ist nicht nur eine neuere Art, React-Apps zu bauen – er ist ein anderes Performance-Modell. Server Components, Streaming und die Edge Runtime lassen Sie dramatisch weniger JavaScript an den Browser ausliefern und dabei Content schneller bereitstellen. Gut eingesetzt sind sie der Unterschied zwischen einer Website, die sich sofort anfühlt, und einer, die sich dreht.
Server Components: weniger JavaScript ausliefern
Jede Komponente, die auf dem Server rendern kann, sollte es auch tun. Server Components senden fertiges HTML, statt den Code der Komponente, ihre Abhängigkeiten und die Datenabruf-Logik an den Client zu schicken. Das Ergebnis ist ein kleineres Bundle, eine schnellere Hydration und Content, der sichtbar ist, bevor eine einzige Zeile Client-JavaScript läuft.
Streaming und Suspense-Grenzen
Streaming erlaubt es dem Server, die Seite in Teilen zu senden. Verpacken Sie langsame oder datenintensive Abschnitte in Suspense, und die schnellen Teile malen sofort, während der Rest nachgeladen wird – kein Warten mehr darauf, dass die langsamste Abfrage fertig ist, bevor der Nutzer überhaupt etwas sieht.
- Client-Komponenten klein halten und an die Blätter des Baums schieben
- Below-the-fold- und datenintensive Abschnitte hinter Suspense streamen
- Auf der Edge rendern, damit Antworten nah am Nutzer beginnen
- Schwere interaktive Widgets erst nach dem ersten Paint laden
Muster, keine Tricks
Keine dieser Funktionen ist ein magischer Schalter. Server- und Client-Grenzen, Streaming und Laufzeit müssen pro Route entworfen werden; Bundle-Größe und Reaktionszeiten sind anschließend im Produktions-Build zu messen.