Tidligere gennemgik vi, hvordan man gør applikationen dynamisk. Dog kan håndtering af store datamængder føre til langsomme dataforespørgsler, hvilket kan påvirke applikationens ydeevne negativt.

Lad os nu undersøge strategier til at forbedre brugeroplevelsen ved håndtering af langsomme dataanmodninger.

Teori

En udbredt teknik, der kan anvendes, er Streaming.

Streaming er en metode til at sende information i mindre dele i stedet for alt på én gang. Forestil dig det som at opdele en lang rejse i mindre etaper og kun tage hvert skridt, når du er klar. Dette hjælper med at undgå forsinkelser og gør det muligt at se og bruge dele af en webside uden at vente på, at alt indlæses.

I Next.js findes der to måder at benytte streaming på:

• For hele websiden anvendes en fil kaldet loading.tsx;
• For specifikke dele af websiden anvendes noget, der hedder <Suspense>.

Lad os se nærmere på, hvordan dette fungerer.

Streaming af hele siden

Opret en loading.tsx-fil i dashboard-mappen for at tilføje en loader til hele dashboard-siden.

• loading.tsx: Dette er en speciel fil i Next.js, der bruger Suspense. Den hjælper med at oprette en midlertidig brugergrænseflade (fallback UI), som vises, mens sidens hovedindhold indlæses;
• Da <Sidebar> er statisk (ikke ændrer sig), vises den med det samme. Brugere kan interagere med den, selvom det dynamiske indhold stadig indlæses.

Godt arbejde! Du har netop brugt streaming.

Løsning af fejl

Det nuværende problem er, at loaderen, der anvendes i loading.tsx-filen, gælder for alle sider i dashboard-mappen. Men hvad hvis vi har brug for specifikke UI-elementer til hver app-side?

For at løse denne fejl kan vi implementere Route Groups. Opret en (overview)-mappe i dashboard-mappen og flyt loading.tsx- og page.tsx-filerne derind.

På denne måde vil loading.tsx-filen kun gælde for dashboard-siden, hvilket løser problemet.

Route Groups hjælper os med at organisere filer pænt uden at ændre webadressen. Når vi opretter en mappe med parenteser (), vil mappenavnet ikke være en del af webadressen. For eksempel bliver /dashboard/(overview)/page.tsx blot til /dashboard.