loading.js

Die spezielle Datei loading.js hilft Ihnen, aussagekräftige Lade-Benutzeroberflächen mit React Suspense zu erstellen. Mit dieser Konvention können Sie einen sofortigen Ladezustand vom Server anzeigen, während der Inhalt eines Routen-Segments gestreamt wird. Der neue Inhalt wird automatisch eingeblendet, sobald er vollständig geladen ist.

export default function Loading() {
  // Oder eine benutzerdefinierte Lade-Skeleton-Komponente
  return <p>Laden...</p>
}

export default function Loading() {
  // Oder eine benutzerdefinierte Lade-Skeleton-Komponente
  return <p>Laden...</p>
}

In der loading.js-Datei können Sie jede leichtgewichtige Lade-Benutzeroberfläche hinzufügen. Es kann hilfreich sein, die React Developer Tools zu verwenden, um Suspense-Grenzen manuell umzuschalten.

Standardmäßig ist diese Datei eine Server-Komponente - kann aber auch als Client-Komponente über die "use client"-Direktive verwendet werden.

Referenz

Parameter

Lade-Benutzeroberflächenkomponenten akzeptieren keine Parameter.

Verhalten

Die Fallback-Benutzeroberfläche wird vorab abgerufen, wodurch die Navigation sofort erfolgt, es sei denn, das Vorabrufen ist noch nicht abgeschlossen.
Die Navigation ist unterbrechbar, was bedeutet, dass das Wechseln der Route nicht warten muss, bis der Inhalt der Route vollständig geladen ist, bevor zu einer anderen Route navigiert wird.
Gemeinsame Layouts bleiben interaktiv, während neue Routen-Segmente geladen werden.

Sofortige Ladezustände

Ein sofortiger Ladezustand ist eine Fallback-Benutzeroberfläche, die unmittelbar bei der Navigation angezeigt wird. Sie können Ladeindikatoren wie Skelette oder Spinner vorab rendern oder einen kleinen, aber aussagekräftigen 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 Benutzeroberfläche in Loading einfügen, einschließlich eines Skeletts.
  return <LoadingSkeleton />
}

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

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

SEO

Next.js wartet, bis das Abrufen von Daten innerhalb von generateMetadata abgeschlossen ist, bevor die Benutzeroberfläche an den Client gestreamt wird. Dies stellt sicher, dass der erste Teil einer gestreamten Antwort <head>-Tags enthält.
Da das Streaming serverseitig 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, zum Beispiel bei Verwendung von redirect oder notFound. Da die Antwort-Header bereits an den Client gesendet wurden, kann der Statuscode der Antwort nicht aktualisiert werden. Dies hat keine Auswirkungen auf die SEO.

Browser-Beschränkungen

Einige Browser puffern eine gestreamte Antwort. Möglicherweise sehen Sie die gestreamte Antwort erst, wenn die Antwort 1024 Byte überschreitet. Dies betrifft in der Regel nur "Hello World"-Anwendungen, nicht jedoch reale Anwendungen.

Plattformunterstützung

Bereitstellungsoption	Unterstützt
Node.js-Server	Ja
Docker-Container	Ja
Statischer Export	Nein
Adapter	Plattformspezifisch

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

Beispiele

Streaming mit Suspense

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

<Suspense> funktioniert, indem es eine Komponente umschließt, die eine asynchrone Aktion ausführt (z.B. Daten abrufen), währenddessen eine Fallback-Benutzeroberfläche (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>Feed wird geladen...</p>}>
        <PostFeed />
      </Suspense>
      <Suspense fallback={<p>Wetter wird geladen...</p>}>
        <Weather />
      </Suspense>
    </section>
  )
}

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:

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

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

Versionsverlauf

Version	Änderungen
`v13.0.0`	`loading` eingeführt.

On this page