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 ein Fallback-UI, das 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 App 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 beliebige UI innerhalb von Loading hinzufügen, einschließlich eines Skeletts.
  return <LoadingSkeleton />
}

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

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

Wissenswert:

• Die Navigation ist sofort, auch mit serverzentriertem Routing.
• Die Navigation ist unterbrechbar, d.h. das Wechseln der Routen muss nicht warten, bis der Inhalt der Route vollständig geladen ist.
• 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 für beide Node.js- und Edge-Runtimes.

Wissenswert:

• Einige Browser puffern eine Streaming-Antwort. Möglicherweise sehen Sie die gestreamte Antwort erst, wenn sie 1024 Bytes überschreitet. Dies betrifft normalerweise nur "Hello World"-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. Dann rendert der Server 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, das HTML einer Seite in kleinere Teile zu zerlegen 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 Datenabfragen 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 ein 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>
  )
}

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 auf den Abschluss der Datenabfrage in generateMetadata, bevor UI an den Client gestreamt wird. Dies stellt sicher, dass der erste Teil einer gestreamten Antwort <head>-Tags enthält.
• Da Streaming server-seitig gerendert wird, 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 mehr aktualisiert werden. Dies hat keine Auswirkungen auf die SEO.