Förståelse av Laddare
Tidigare behandlade vi hur man gör appen dynamisk. Att hantera stora datamängder kan dock leda till långsamma datahämtningar, vilket påverkar applikationens prestanda negativt.
Nu ska vi fördjupa oss i strategier för att förbättra användarupplevelsen vid hantering av långsamma dataförfrågningar.
Teori
En allmänt använd teknik är Streaming.
Streaming innebär att information skickas i mindre delar istället för allt på en gång. Tänk på det som att dela upp en lång resa i mindre steg och bara ta varje steg när du är redo. Detta hjälper till att undvika fördröjningar och gör det möjligt att se och använda delar av en webbsida utan att behöva vänta på att allt ska laddas.
I Next.js finns det två sätt att använda streaming:
- För hela webbsidan används en fil som heter
loading.tsx; - För specifika delar av webbsidan används något som kallas
<Suspense>.
Låt oss titta närmare på hur detta fungerar.
Streama hela sidan
Skapa en loading.tsx-fil i mappen dashboard för att lägga till en laddare för hela dashboardsidan.
loading.tsx: Detta är en speciell fil i Next.js som använderSuspense. Den hjälper oss att skapa ett temporärt gränssnitt (fallback UI) som visas medan sidans huvudinnehåll laddas;- Eftersom
<Sidebar>är statisk (förändras inte) visas den omedelbart. Användare kan interagera med den även medan det dynamiska innehållet laddas.
Bra jobbat! Du har precis använt streaming.
Åtgärda bugg
Det nuvarande problemet vi stöter på är att laddaren som används i filen loading.tsx tillämpas på alla sidor inom mappen dashboard. Men vad händer om vi behöver specifika UI-element för varje appsida?
För att åtgärda denna bugg kan vi implementera Route Groups. Skapa en (overview)-mapp i katalogen dashboard och flytta filerna loading.tsx och page.tsx dit.
Genom att göra detta kommer filen loading.tsx endast att tillämpas på dashboardsidan, vilket löser problemet.
Routgrupper hjälper oss att organisera filer på ett ordnat sätt utan att ändra webbadressen. När vi skapar en mapp med parenteser (), kommer mappnamnet inte att vara en del av webbadressen. Till exempel blir /dashboard/(overview)/page.tsx bara /dashboard.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.08Förståelse av Laddare
Svep för att visa menyn
Tidigare behandlade vi hur man gör appen dynamisk. Att hantera stora datamängder kan dock leda till långsamma datahämtningar, vilket påverkar applikationens prestanda negativt.
Nu ska vi fördjupa oss i strategier för att förbättra användarupplevelsen vid hantering av långsamma dataförfrågningar.
Teori
En allmänt använd teknik är Streaming.
Streaming innebär att information skickas i mindre delar istället för allt på en gång. Tänk på det som att dela upp en lång resa i mindre steg och bara ta varje steg när du är redo. Detta hjälper till att undvika fördröjningar och gör det möjligt att se och använda delar av en webbsida utan att behöva vänta på att allt ska laddas.
I Next.js finns det två sätt att använda streaming:
- För hela webbsidan används en fil som heter
loading.tsx; - För specifika delar av webbsidan används något som kallas
<Suspense>.
Låt oss titta närmare på hur detta fungerar.
Streama hela sidan
Skapa en loading.tsx-fil i mappen dashboard för att lägga till en laddare för hela dashboardsidan.
loading.tsx: Detta är en speciell fil i Next.js som använderSuspense. Den hjälper oss att skapa ett temporärt gränssnitt (fallback UI) som visas medan sidans huvudinnehåll laddas;- Eftersom
<Sidebar>är statisk (förändras inte) visas den omedelbart. Användare kan interagera med den även medan det dynamiska innehållet laddas.
Bra jobbat! Du har precis använt streaming.
Åtgärda bugg
Det nuvarande problemet vi stöter på är att laddaren som används i filen loading.tsx tillämpas på alla sidor inom mappen dashboard. Men vad händer om vi behöver specifika UI-element för varje appsida?
För att åtgärda denna bugg kan vi implementera Route Groups. Skapa en (overview)-mapp i katalogen dashboard och flytta filerna loading.tsx och page.tsx dit.
Genom att göra detta kommer filen loading.tsx endast att tillämpas på dashboardsidan, vilket löser problemet.
Routgrupper hjälper oss att organisera filer på ett ordnat sätt utan att ändra webbadressen. När vi skapar en mapp med parenteser (), kommer mappnamnet inte att vara en del av webbadressen. Till exempel blir /dashboard/(overview)/page.tsx bara /dashboard.
Tack för dina kommentarer!
