Lader

Zuvor haben wir behandelt, wie man die App dynamisch gestaltet. Allerdings kann der Umgang mit einer großen Datenmenge zu langsamen Datenabrufen führen, was sich negativ auf die Leistung der Anwendung auswirkt.

Nun wollen wir uns mit Strategien befassen, um die Benutzererfahrung bei der Handhabung von langsamen Datenanforderungen zu verbessern.

Theorie

Wir können die weit verbreitete Technik namens Streaming verwenden.

Streaming ist eine Methode, Informationen in kleineren Teilen anstatt auf einmal zu senden. Stellen Sie sich das vor wie eine lange Reise, die in kleinere Schritte unterteilt wird, und Sie machen jeden Schritt nur, wenn Sie bereit sind. Dies hilft, Verzögerungen zu vermeiden und ermöglicht es Ihnen, Teile einer Webseite zu sehen und zu nutzen, ohne darauf zu warten, dass alles geladen ist.

In Next.js gibt es zwei Möglichkeiten, Streaming zu nutzen:

• Für die gesamte Webseite verwenden wir eine Datei namens loading.tsx;
• Für bestimmte Teile der Webseite verwenden wir etwas, das <Suspense> genannt wird.

Schauen wir uns genauer an, wie das funktioniert.

Streaming der gesamten Seite

Lassen Sie uns eine loading.tsx-Datei im dashboard-Ordner erstellen, um einen Loader zur gesamten Dashboard-Seite hinzuzufügen.

• loading.tsx: Dies ist eine spezielle Datei in Next.js, die Suspense verwendet. Sie hilft uns, eine temporäre Benutzeroberfläche (Fallback-UI) zu erstellen, die angezeigt wird, während der Hauptinhalt der Seite geladen wird;
• Da die <Sidebar> statisch ist (sich nicht ändert), erscheint sie sofort. Benutzer können mit ihr interagieren, auch während der dynamische Inhalt geladen wird.

Großartige Arbeit! Sie haben gerade Streaming verwendet.

Fehlerbehebung

Das aktuelle Problem, dem wir begegnen, ist, dass der Loader, der in der Datei loading.tsx verwendet wird, auf alle Seiten im Ordner dashboard angewendet wird. Aber was ist, wenn wir spezifische UI-Elemente für jede App-Seite benötigen?

Um diesen Fehler zu beheben, können wir Route Groups implementieren. Erstellen Sie einen (overview) Ordner im dashboard Verzeichnis und verschieben Sie die Dateien loading.tsx und page.tsx dorthin.

Auf diese Weise wird die Datei loading.tsx ausschließlich auf die Dashboard-Seite angewendet, wodurch das Problem gelöst wird.

Route Groups helfen uns, Dateien ordentlich zu organisieren, ohne die Webadresse zu ändern. Wenn wir einen Ordner mit Klammern () erstellen, wird der Ordnername nicht Teil der Webadresse. Zum Beispiel wird aus /dashboard/(overview)/page.tsx einfach /dashboard.