Virtualisierung mit Datenabruf kombinieren

Infinite Scroll lädt weitere Daten, wenn sich der Nutzer dem Ende der Liste nähert, statt mit expliziten Seitenschaltflächen zu paginieren. In Kombination mit Virtualisierung können Sie so riesige Datenmengen flüssig durchsuchen.

Die Liste zeigt nur sichtbare Zeilen an, während neue Daten im Hintergrund abgerufen werden, kurz bevor der Nutzer den unteren Rand erreicht.

Listenkomponenten von react-window akzeptieren einen onItemsRendered-Callback, der meldet, welche Elementindizes aktuell gerendert werden. Er liefert die Start- und Endindizes des sichtbaren Bereichs und des Overscan-Bereichs.

Dieser Callback ist Ihr Ansatzpunkt für das Scrollen. So können Sie erkennen, wie weit der Nutzer durch die Liste gescrollt hat, ohne direkt auf rohe Scroll-Events zugreifen zu müssen.

Um zu wissen, wann Daten abgerufen werden müssen, vergleichen Sie overscanStopIndex aus onItemsRendered mit dem aktuellen itemCount. Nähert sich das gerenderte Fenster dem Ende der geladenen Daten, werden weitere Daten benötigt.

Der Overscan-Stoppindex verschafft etwas Vorlauf und löst den Abruf geringfügig aus, bevor der Nutzer tatsächlich die allerletzte Zeile erreicht.

Wenn der Stoppindex einen Schwellenwert überschreitet, beispielsweise innerhalb einer Bildschirmhöhe von itemCount liegt, rufen Sie Ihre Abruffunktion für die nächste Seite auf. Sichern Sie den Aufruf ab, damit nicht mehrere überlappende Anfragen ausgelöst werden.

Ein Lade-Flag oder die Prüfung, ob bereits ein Abruf läuft, verhindert doppelte Anfragen, während der Nutzer durch den Auslösebereich scrollt.

Ein sauberer Kniff besteht darin, itemCount auf die Anzahl der geladenen Elemente plus eins zu setzen, solange weitere Daten vorhanden sind. Die zusätzliche Zeile rendert einen Spinner und signalisiert, dass der Abruf läuft.

Wenn neue Daten eintreffen, erhöht sich die Anzahl, und die Spinner-Zeile wird durch echte Inhalte ersetzt. So erhalten Sie eine flüssige visuelle Rückmeldung.

Das Begleitpaket react-window-infinite-loader übernimmt diese Logik für Sie. Sie geben isItemLoaded, loadMoreItems und itemCount vor, und es ruft Ihren Loader auf, sobald der Nutzer zu nicht geladenen Zeilen scrollt.

Es verwaltet, welche Bereiche geladen sind, und verhindert redundante Ladeaufrufe – dadurch wird robustes Infinite Scrolling einfacher.

Für nicht geladene Indizes können Sie statt leerer Bereiche Platzhalter- oder Skeleton-Zeilen rendern. Die Renderfunktion prüft, ob das Element an einem Index geladen ist, und zeigt andernfalls ein Skeleton.

Skeletons bewahren das Layout und vermitteln den Fortschritt. Das wirkt angenehmer als leerer Raum, während die nächste Seite geladen wird.

Abrufe können fehlschlagen, daher sollten Sie Fehler elegant behandeln. Sie können am Ende eine spezielle Fehlerzeile mit einer Wiederholen-Schaltfläche rendern, die die Ladefunktion für den fehlgeschlagenen Bereich erneut aufruft.

So bleibt die Liste nach einem vorübergehenden Fehler nutzbar, und Sie erhalten eine klare Möglichkeit zur Behebung, ohne die gesamte Seite neu laden zu müssen.

Zwei gängige Paginierungsarten liefern Daten für Infinite Lists. Bei der Offset-Paginierung wird per Seitennummer oder Skip-Anzahl angefragt, bei der Cursor-Paginierung werden Elemente nach einem opaken Cursor angefordert, der auf das zuletzt gesehene Element verweist.

Cursor-Paginierung ist für sich ändernde Live-Daten im Allgemeinen zuverlässiger, da sie Verschiebungen und Duplikate vermeidet, die beim Einfügen von Elementen durch Offsets entstehen können.

React Query useInfiniteQuery ergänzt Virtualisierung auf natürliche Weise. Es verwaltet geladene Seiten, den nächsten Cursor sowie Lade- und Fehlerzustände, während react-window die zusammengeführten Seiten effizient rendert.

Sie führen die Seiten für die Liste zu einem einzigen Array zusammen und rufen fetchNextPage auf, sobald der Schwellenwert von onItemsRendered erreicht ist. So erhalten Sie Caching und Wiederholungsversuche ohne zusätzlichen Aufwand.

Ermitteln Sie, wann in einer virtualisierten Infinite-Liste weitere Daten abgerufen werden.

Beim Infinite Scroll werden Seiten geladen, sobald sich der Nutzer dem Ende nähert. onItemsRendered meldet Indizes; der Vergleich von overscanStopIndex mit itemCount zeigt, wann Daten abgerufen werden müssen, wobei doppelte Anfragen verhindert werden.

Verwenden Sie Platzhalter- und Fehlerzeilen, react-window-infinite-loader für die Verwaltung geladener Bereiche und Cursor-Paginierung für Live-Daten. React Query useInfiniteQuery verwaltet Seiten, Cursor und Zustände zusammen mit dem Rendering durch react-window.