Laden der Benutzeroberfläche und Streaming

Die spezielle Datei loading.js hilft Ihnen, eine aussagekräftige Ladebenutzeroberfläche mit React Suspense zu erstellen. Mit dieser Konvention können Sie einen sofortigen Ladzustand vom Server anzeigen, während die Inhalte eines Routensegments geladen werden. Die neuen Inhalte werden automatisch ausgetauscht, sobald das Rendering abgeschlossen ist.

Sofortige Ladzustände

Ein sofortiger Ladzustand ist eine Fallback-Benutzeroberfläche, die unmittelbar bei der Navigation angezeigt wird. Sie können Ladeanzeigeelemente wie Skelette und Spinner oder einen kleinen, aber bedeutsamen Teil zukünftiger Bildschirme wie ein Titelbild, einen Titel usw. vorrendern. Dies hilft Benutzern zu verstehen, dass die App reagiert, und bietet ein besseres Benutzererlebnis.

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

export default function Loading() {
  // Sie können eine beliebige Benutzeroberfläche in Loading hinzufügen, einschließlich eines Skeletts.
  return <LoadingSkeleton />
}

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

Hinweis:

• Navigation ist unmittelbar, auch bei serverseitiger Routing.
• Navigation kann unterbrochen werden, d.h. das Wechseln von Routen erfordert nicht, dass der Inhalt der Route vollständig geladen sein muss, bevor zu einer anderen Route navigiert wird.
• Gemeinsam genutzte Layouts bleiben interaktiv, während neue Routensegmente geladen werden.

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 Benutzeroberflächen-Komponenten erstellen. Der App-Router unterstützt Streaming mit Suspense für sowohl Node.js- als auch Edge-Laufzeitumgebungen.

Hinweis:

• Einige Browser puffern eine Streaming-Antwort. Sie sehen die gestreamte Antwort möglicherweise erst, wenn die Antwort 1024 Bytes übersteigt. Dies betrifft typischerweise 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 dessen Einschränkungen zu verstehen.

Bei SSR gibt es eine Reihe von Schritten, die abgeschlossen werden müssen, bevor ein Benutzer eine Seite sehen und mit ihr interagieren kann:

1. Zunächst 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 hydratisiert React die Benutzeroberfläche, um sie interaktiv zu machen.

Diese Schritte sind sequenziell und blockierend, was bedeutet, dass der Server das HTML für eine Seite erst rendern kann, wenn alle Daten abgerufen wurden. Und auf dem Client kann React die Benutzeroberfläche erst hydratisieren, wenn der Code für alle Komponenten auf der Seite heruntergeladen wurde.

SSR mit React und Next.js hilft, die wahrgenommene Ladeperformance zu verbessern, indem dem Benutzer so schnell wie möglich eine nicht-interaktive Seite gezeigt wird.

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

Streaming ermöglicht es, das HTML der Seite in kleinere Fragmente zu unterteilen und diese progressiv vom Server an den Client zu senden.

Dies ermöglicht es, Teile der Seite früher anzuzeigen, ohne auf das vollständige Laden aller Daten warten zu müssen.

Streaming funktioniert gut mit dem Komponentenmodell von React, da jede Komponente als Fragment 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 die Hydratisierung früher 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 vorteilhaft, 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 hilft auch, die Time to Interactive (TTI) zu verbessern, insbesondere auf langsameren Geräten.

Beispiel

<Suspense> funktioniert, indem eine Komponente, die eine asynchrone Aktion ausführt (z. B. Daten abrufen), umschlossen wird und eine Fallback-Benutzeroberfläche (z. B. Skelett, Spinner) angezeigt wird, während dies geschieht, und diese dann durch Ihre Komponente ausgetauscht wird, sobald die Aktion abgeschlossen ist.

import { Suspense } from 'react'
import { PostFeed, Weather } from './Components'
 
export default function Posts() {
  return (
    <section>
      <Suspense fallback={<p>Feed wird geladen...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Wetter wird geladen...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

Durch die Verwendung von Suspense erhalten Sie die Vorteile von:

1. Streaming-Serverrendering - Progressives Rendern von HTML vom Server zum Client.
2. Selektive Hydratation - React priorisiert, welche Komponenten basierend auf Benutzerinteraktion zuerst interaktiv gemacht werden.

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

SEO

• Next.js wartet darauf, dass Datenabrufe innerhalb von generateMetadata abgeschlossen sind, bevor die Benutzeroberfläche an den Client gestreamt wird. Dies garantiert, dass der erste Teil einer gestreamten Antwort <head>-Tags enthält.
• Da das Streaming serverseitig gerendert wird, hat es keine Auswirkungen auf SEO. Sie können das Rich Results Test-Tool von Google verwenden, um zu sehen, wie Ihre Seite für Googles Webcrawler aussieht und das serialisierte HTML anzuzeigen (Quelle).

Statuscodes

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

Der Server kann dem Client innerhalb des gestreamten Inhalts selbst noch Fehler oder Probleme mitteilen, beispielsweise bei Verwendung von redirect oder notFound. Da die Antwortheader bereits an den Client gesendet wurden, kann der Statuscode der Antwort nicht aktualisiert werden. Dies wirkt sich nicht auf SEO aus.