Forståelse av Lastere
Tidligere har vi gjennomgått hvordan man gjør appen dynamisk. Imidlertid kan håndtering av store datamengder føre til trege dataforespørsler, noe som kan påvirke ytelsen til applikasjonen negativt.
La oss nå se nærmere på strategier for å forbedre brukeropplevelsen ved håndtering av trege dataforespørsler.
Teori
Vi kan benytte en mye brukt teknikk kalt Streaming.
Streaming er en metode for å sende informasjon i mindre deler i stedet for alt på én gang. Tenk på det som å dele opp en lang reise i mindre etapper og kun ta hvert steg når du er klar. Dette bidrar til å unngå forsinkelser og lar deg se og bruke deler av en nettside uten å måtte vente på at alt skal lastes inn.
I Next.js finnes det to måter å bruke streaming på:
- For hele nettsiden bruker vi en fil som heter
loading.tsx; - For spesifikke deler av nettsiden bruker vi noe som heter
<Suspense>.
La oss se nærmere på hvordan dette fungerer.
Strømming av hele siden
Opprett en loading.tsx-fil i dashboard-mappen for å legge til en laster for hele dashboard-siden.
loading.tsx: Dette er en spesiell fil i Next.js som brukerSuspense. Den hjelper oss å lage et midlertidig brukergrensesnitt (fallback UI) som vises mens hovedinnholdet på siden lastes inn;- Siden
<Sidebar>er statisk (ikke endres), vises den umiddelbart. Brukere kan samhandle med den selv om det dynamiske innholdet fortsatt lastes inn.
Godt jobbet! Du har nettopp brukt strømming.
Feilretting
Problemet vi opplever nå er at lasteren som brukes i loading.tsx-filen blir brukt på alle sider i dashboard-mappen. Men hva om vi trenger spesifikke UI-elementer for hver app-side?
For å løse denne feilen kan vi implementere Route Groups. Opprett en (overview)-mappe inne i dashboard-katalogen og flytt loading.tsx- og page.tsx-filene dit.
Ved å gjøre dette vil loading.tsx-filen kun gjelde for dashboard-siden, og problemet blir løst.
Rutegrupper hjelper oss med å organisere filer på en ryddig måte uten å endre nettadressen. Når vi lager en mappe med parenteser (), vil mappenavnet ikke være en del av nettadressen. For eksempel blir /dashboard/(overview)/page.tsx bare til /dashboard.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain more about how Suspense works for specific parts of a page?
What are some best practices for using loading.tsx in Next.js?
How do I move files into a route group and what should I watch out for?
Awesome!
Completion rate improved to 2.08Forståelse av Lastere
Sveip for å vise menyen
Tidligere har vi gjennomgått hvordan man gjør appen dynamisk. Imidlertid kan håndtering av store datamengder føre til trege dataforespørsler, noe som kan påvirke ytelsen til applikasjonen negativt.
La oss nå se nærmere på strategier for å forbedre brukeropplevelsen ved håndtering av trege dataforespørsler.
Teori
Vi kan benytte en mye brukt teknikk kalt Streaming.
Streaming er en metode for å sende informasjon i mindre deler i stedet for alt på én gang. Tenk på det som å dele opp en lang reise i mindre etapper og kun ta hvert steg når du er klar. Dette bidrar til å unngå forsinkelser og lar deg se og bruke deler av en nettside uten å måtte vente på at alt skal lastes inn.
I Next.js finnes det to måter å bruke streaming på:
- For hele nettsiden bruker vi en fil som heter
loading.tsx; - For spesifikke deler av nettsiden bruker vi noe som heter
<Suspense>.
La oss se nærmere på hvordan dette fungerer.
Strømming av hele siden
Opprett en loading.tsx-fil i dashboard-mappen for å legge til en laster for hele dashboard-siden.
loading.tsx: Dette er en spesiell fil i Next.js som brukerSuspense. Den hjelper oss å lage et midlertidig brukergrensesnitt (fallback UI) som vises mens hovedinnholdet på siden lastes inn;- Siden
<Sidebar>er statisk (ikke endres), vises den umiddelbart. Brukere kan samhandle med den selv om det dynamiske innholdet fortsatt lastes inn.
Godt jobbet! Du har nettopp brukt strømming.
Feilretting
Problemet vi opplever nå er at lasteren som brukes i loading.tsx-filen blir brukt på alle sider i dashboard-mappen. Men hva om vi trenger spesifikke UI-elementer for hver app-side?
For å løse denne feilen kan vi implementere Route Groups. Opprett en (overview)-mappe inne i dashboard-katalogen og flytt loading.tsx- og page.tsx-filene dit.
Ved å gjøre dette vil loading.tsx-filen kun gjelde for dashboard-siden, og problemet blir løst.
Rutegrupper hjelper oss med å organisere filer på en ryddig måte uten å endre nettadressen. Når vi lager en mappe med parenteser (), vil mappenavnet ikke være en del av nettadressen. For eksempel blir /dashboard/(overview)/page.tsx bare til /dashboard.
Takk for tilbakemeldingene dine!
