Zuvor haben wir behandelt, wie die App dynamisch gestaltet werden kann. Das Verarbeiten großer Datenmengen kann jedoch zu langsamen Datenabfragen führen, was die Performance der Anwendung negativ beeinflusst.

Im Folgenden werden Strategien vorgestellt, um die Benutzererfahrung bei langsamen Datenanfragen zu verbessern.

Theorie

Eine weit verbreitete Technik ist das Streaming.

Streaming bezeichnet das Übertragen von Informationen in kleineren Teilen anstatt alles auf einmal zu senden. Man kann es sich vorstellen wie eine lange Reise, die in kleinere Etappen unterteilt wird, wobei jeder Schritt erst dann erfolgt, wenn man bereit ist. Dadurch werden Verzögerungen vermieden und Teile einer Webseite können genutzt werden, ohne auf das vollständige Laden zu warten.

In Next.js gibt es zwei Möglichkeiten für Streaming:

• Für die gesamte Webseite wird eine Datei namens loading.tsx verwendet;
• Für bestimmte Bereiche der Webseite wird <Suspense> eingesetzt.

Im Folgenden wird erläutert, wie dies funktioniert.

Streaming der gesamten Seite

Erstellen Sie eine Datei loading.tsx im Ordner dashboard, um einen Loader für die gesamte Dashboard-Seite hinzuzufügen.

• loading.tsx: Dies ist eine spezielle Datei in Next.js, die Suspense verwendet. Sie ermöglicht das Erstellen einer temporären Benutzeroberfläche (Fallback-UI), 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.

Sehr gut! Sie haben gerade Streaming verwendet.

Fehlerbehebung

Das aktuelle Problem besteht darin, dass der im loading.tsx verwendete Loader auf alle Seiten im Ordner dashboard angewendet wird. Was ist jedoch, wenn wir spezifische UI-Elemente für jede App-Seite benötigen?

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

Dadurch wird die Datei loading.tsx ausschließlich auf die Dashboard-Seite angewendet, wodurch das Problem behoben wird.

Routengruppen helfen dabei, Dateien übersichtlich zu organisieren, ohne die Webadresse zu verändern. Wenn ein Ordner mit Klammern () erstellt wird, ist der Ordnername nicht Teil der Webadresse. Zum Beispiel wird aus /dashboard/(overview)/page.tsx einfach /dashboard.