Lade-UI und Streaming

Die spezielle Datei loading.js hilft Ihnen, aussagekräftige Lade-UIs mit React Suspense zu erstellen. Mit dieser Konvention können Sie einen sofortigen Ladezustand vom Server anzeigen, während der Inhalt eines Routensegments geladen wird. Der neue Inhalt wird automatisch eingeblendet, sobald das Rendering abgeschlossen ist.

Sofortige Ladezustände

Ein sofortiger Ladezustand ist eine Fallback-UI, die unmittelbar bei der Navigation angezeigt wird. Sie können Ladeindikatoren wie Skelette oder Spinner vorrendern oder einen kleinen, aber bedeutungsvollen Teil zukünftiger Bildschirme wie ein Titelbild, Titel usw. Dies hilft Benutzern zu verstehen, dass die Anwendung reagiert, und bietet eine bessere Benutzererfahrung.

Erstellen Sie einen Ladezustand, indem Sie eine loading.js-Datei in einem Ordner hinzufügen.

export default function Loading() {
  // Sie können jede UI innerhalb von Loading hinzufügen, einschließlich eines Skeletts.
  return <LoadingSkeleton />
}

Im selben Ordner wird loading.js innerhalb von layout.js verschachtelt. Es wird automatisch die page.js-Datei und alle untergeordneten Elemente in eine <Suspense>-Grenze einwickeln.

Wissenswert:

• Die Navigation ist unmittelbar, auch mit serverzentriertem Routing.
• Die Navigation ist unterbrechbar, d.h. das Wechseln der Route muss nicht warten, bis der Inhalt der Route vollständig geladen ist, bevor zu einer anderen Route navigiert wird.
• Gemeinsame Layouts bleiben interaktiv, während neue Routensegmente laden.

Empfehlung: Verwenden Sie die loading.js-Konvention für Routensegmente (Layouts und Seiten), da Next.js diese Funktionalität optimiert.

Streaming mit Suspense

Zusätzlich zu loading.js können Sie auch manuell Suspense-Grenzen für Ihre eigenen UI-Komponenten erstellen. Der App-Router unterstützt Streaming mit Suspense.

Wissenswert:

• Einige Browser puffern eine Streaming-Antwort. Möglicherweise sehen Sie die gestreamte Antwort erst, wenn die Antwort 1024 Bytes überschreitet. Dies betrifft normalerweise nur "Hallo Welt"-Anwendungen, nicht jedoch reale Anwendungen.

Was ist Streaming?

Um zu verstehen, wie Streaming in React und Next.js funktioniert, ist es hilfreich, Server-Side Rendering (SSR) und seine Grenzen zu kennen.

Bei SSR müssen mehrere Schritte abgeschlossen werden, bevor ein Benutzer eine Seite sehen und mit ihr interagieren kann:

1. Zuerst werden alle Daten für eine bestimmte Seite auf dem Server abgerufen.
2. Der Server rendert dann das HTML für die Seite.
3. Das HTML, CSS und JavaScript für die Seite werden an den Client gesendet.
4. Eine nicht-interaktive Benutzeroberfläche wird mit dem generierten HTML und CSS angezeigt.
5. Schließlich hydriert React die Benutzeroberfläche, um sie interaktiv zu machen.

Diese Schritte sind sequenziell und blockierend, d.h. der Server kann das HTML für eine Seite erst rendern, wenn alle Daten abgerufen wurden. Und auf dem Client kann React die UI erst hydrieren, wenn der Code für alle Komponenten der Seite heruntergeladen wurde.

SSR mit React und Next.js verbessert die wahrgenommene Ladeleistung, indem dem Benutzer so schnell wie möglich eine nicht-interaktive Seite angezeigt wird.

Es kann jedoch immer noch langsam sein, da alle Datenabfragen auf dem Server abgeschlossen sein müssen, bevor die Seite dem Benutzer angezeigt werden kann.

Streaming ermöglicht es Ihnen, das HTML einer Seite in kleinere Teile aufzuteilen und diese schrittweise vom Server an den Client zu senden.

Dadurch können Teile der Seite früher angezeigt werden, ohne auf das Laden aller Daten warten zu müssen, bevor irgendeine UI gerendert werden kann.

Streaming funktioniert gut mit dem Komponentenmodell von React, da jede Komponente als Teil betrachtet werden kann. Komponenten mit höherer Priorität (z.B. Produktinformationen) oder solche, die keine Daten benötigen, können zuerst gesendet werden (z.B. Layout), und React kann früher mit der Hydration beginnen. Komponenten mit niedrigerer Priorität (z.B. Bewertungen, verwandte Produkte) können in derselben Serveranfrage gesendet werden, nachdem ihre Daten abgerufen wurden.

Streaming ist besonders nützlich, wenn Sie verhindern möchten, dass lange Datenanfragen das Rendern der Seite blockieren, da es die Time To First Byte (TTFB) und First Contentful Paint (FCP) reduzieren kann. Es verbessert auch die Time to Interactive (TTI), insbesondere auf langsameren Geräten.

Beispiel

<Suspense> funktioniert, indem es eine Komponente umschließt, die eine asynchrone Aktion ausführt (z.B. Daten abruft), währenddessen eine Fallback-UI (z.B. Skelett, Spinner) anzeigt und dann Ihre Komponente einblendet, sobald die Aktion abgeschlossen ist.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'

export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Lade Feed...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Lade Wetter...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

Durch die Verwendung von Suspense erhalten Sie die Vorteile von:

1. Streaming Server Rendering - Fortschreitendes Rendern von HTML vom Server zum Client.
2. Selektive Hydration - React priorisiert, welche Komponenten zuerst interaktiv gemacht werden, basierend auf Benutzerinteraktionen.

Weitere Suspense-Beispiele und Anwendungsfälle finden Sie in der React-Dokumentation.

SEO

• Next.js wartet, bis die Datenabfrage innerhalb von generateMetadata abgeschlossen ist, bevor die UI an den Client gestreamt wird. Dadurch wird sichergestellt, dass der erste Teil einer gestreamten Antwort <head>-Tags enthält.
• Da Streaming servergerendert ist, hat es keine Auswirkungen auf die SEO. Sie können das Rich Results Test-Tool von Google verwenden, um zu sehen, wie Ihre Seite für die Webcrawler von Google erscheint, und das serialisierte HTML anzuzeigen (Quelle).

Statuscodes

Beim Streaming wird ein 200-Statuscode zurückgegeben, um anzuzeigen, dass die Anfrage erfolgreich war.

Der Server kann dem Client weiterhin Fehler oder Probleme innerhalb des gestreamten Inhalts mitteilen, z.B. bei Verwendung von redirect oder notFound. Da die Antwortheader bereits an den Client gesendet wurden, kann der Statuscode der Antwort nicht aktualisiert werden. Dies hat keine Auswirkungen auf die SEO.

Plattformunterstützung

Erfahren Sie, wie Sie Streaming konfigurieren, wenn Sie Next.js selbst hosten.