Eerder hebben we besproken hoe de app dynamisch gemaakt kan worden. Het verwerken van grote hoeveelheden data kan echter leiden tot trage data-opvragingen, wat de prestaties van de applicatie negatief beïnvloedt.

Laten we nu ingaan op strategieën om de gebruikerservaring te verbeteren bij het omgaan met trage data-aanvragen.

Theorie

Er kan gebruik worden gemaakt van de veelgebruikte techniek genaamd Streaming.

Streaming is een methode waarbij informatie in kleinere delen wordt verzonden in plaats van alles tegelijk. Dit is vergelijkbaar met het opdelen van een lange reis in kleinere stappen en elke stap pas nemen wanneer je er klaar voor bent. Dit helpt vertragingen te voorkomen en maakt het mogelijk om delen van een webpagina te bekijken en te gebruiken zonder te hoeven wachten tot alles geladen is.

In Next.js zijn er twee manieren om streaming toe te passen:

• Voor de volledige webpagina wordt een bestand genaamd loading.tsx gebruikt;
• Voor specifieke delen van de webpagina wordt <Suspense> toegepast.

Laten we dit nader bekijken.

De volledige pagina streamen

Maak een loading.tsx-bestand aan in de map dashboard om een loader toe te voegen aan de volledige dashboardpagina.

• loading.tsx: Dit is een speciaal bestand in Next.js dat gebruikmaakt van Suspense. Hiermee kan een tijdelijke gebruikersinterface (fallback UI) worden weergegeven terwijl de hoofdinhoud van de pagina wordt geladen;
• Omdat de <Sidebar> statisch is (niet verandert), verschijnt deze direct. Gebruikers kunnen ermee interageren terwijl de dynamische inhoud nog wordt geladen.

Goed gedaan! Je hebt zojuist streaming toegepast.

Bug oplossen

Het huidige probleem is dat de loader in het loading.tsx-bestand wordt toegepast op alle pagina's binnen de map dashboard. Maar wat als we specifieke UI-elementen voor elke app-pagina nodig hebben?

Om dit probleem op te lossen, kunnen we Route Groups implementeren. Maak een (overview)-map aan in de dashboard-directory en verplaats de bestanden loading.tsx en page.tsx daarheen.

Hierdoor wordt het loading.tsx-bestand uitsluitend toegepast op de dashboardpagina, waarmee het probleem wordt opgelost.

Route Groups helpen ons om bestanden overzichtelijk te organiseren zonder het webadres te wijzigen. Wanneer we een map maken met haakjes (), wordt de mapnaam geen onderdeel van het webadres. Bijvoorbeeld, /dashboard/(overview)/page.tsx wordt simpelweg /dashboard.