Lataajien Ymmärtäminen
Aiemmin käsittelimme sovelluksen dynaamisuuden toteuttamista. Suurten tietomäärien käsittely voi kuitenkin johtaa hitaisiin tietohakuihin, mikä heikentää sovelluksen suorituskykyä.
Seuraavaksi tarkastelemme keinoja parantaa käyttäjäkokemusta hitaiden tietopyyntöjen yhteydessä.
Teoriaa
Voimme hyödyntää laajasti käytettyä tekniikkaa nimeltä Streaming.
Streaming tarkoittaa tiedon lähettämistä pienemmissä osissa sen sijaan, että kaikki lähetettäisiin kerralla. Kuvittele tämä pitkän matkan jakamisena pienempiin askeliin ja etenemisenä askel kerrallaan, kun olet valmis. Tämä auttaa välttämään viiveitä ja mahdollistaa verkkosivun osien käyttämisen ilman, että koko sivun tarvitsee latautua ensin.
Next.js:ssä on kaksi tapaa toteuttaa streaming:
- Koko verkkosivulle käytetään tiedostoa nimeltä
loading.tsx; - Tietyille verkkosivun osille käytetään komponenttia
<Suspense>.
Tarkastellaan seuraavaksi tarkemmin, miten tämä toimii.
Koko sivun suoratoisto
Luodaan loading.tsx-tiedosto dashboard-kansioon, jotta voidaan lisätä latausanimaatio koko hallintapaneelin sivulle.
loading.tsx: Tämä on Next.js:n erikoistiedosto, joka käyttääSuspense. Sen avulla voidaan luoda väliaikainen käyttöliittymä (fallback UI), joka näytetään, kun sivun pääsisältö latautuu;- Koska
<Sidebar>on staattinen (ei muutu), se näkyy heti. Käyttäjät voivat käyttää sitä, vaikka dynaaminen sisältö latautuu.
Hienoa työtä! Olet juuri käyttänyt suoratoistoa.
Virheen korjaaminen
Nykyinen ongelma on, että loading.tsx-tiedostossa käytetty latausanimaatio koskee kaikkia dashboard-kansion sivuja. Mutta entä jos tarvitsemme jokaiselle sovellussivulle omat käyttöliittymäelementit?
Tämän virheen korjaamiseksi voidaan käyttää reittiryhmiä (Route Groups). Luo (overview)-kansio dashboard-hakemistoon ja siirrä loading.tsx- ja page.tsx-tiedostot sinne.
Näin loading.tsx-tiedosto koskee vain hallintapaneelin sivua ja ongelma ratkeaa.
Reittiryhmät auttavat järjestämään tiedostoja selkeästi muuttamatta verkko-osoitetta. Kun luomme kansion, jonka nimessä on sulkeet (), kansion nimi ei näy verkko-osoitteessa. Esimerkiksi /dashboard/(overview)/page.tsx näkyy vain muodossa /dashboard.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.08Lataajien Ymmärtäminen
Pyyhkäise näyttääksesi valikon
Aiemmin käsittelimme sovelluksen dynaamisuuden toteuttamista. Suurten tietomäärien käsittely voi kuitenkin johtaa hitaisiin tietohakuihin, mikä heikentää sovelluksen suorituskykyä.
Seuraavaksi tarkastelemme keinoja parantaa käyttäjäkokemusta hitaiden tietopyyntöjen yhteydessä.
Teoriaa
Voimme hyödyntää laajasti käytettyä tekniikkaa nimeltä Streaming.
Streaming tarkoittaa tiedon lähettämistä pienemmissä osissa sen sijaan, että kaikki lähetettäisiin kerralla. Kuvittele tämä pitkän matkan jakamisena pienempiin askeliin ja etenemisenä askel kerrallaan, kun olet valmis. Tämä auttaa välttämään viiveitä ja mahdollistaa verkkosivun osien käyttämisen ilman, että koko sivun tarvitsee latautua ensin.
Next.js:ssä on kaksi tapaa toteuttaa streaming:
- Koko verkkosivulle käytetään tiedostoa nimeltä
loading.tsx; - Tietyille verkkosivun osille käytetään komponenttia
<Suspense>.
Tarkastellaan seuraavaksi tarkemmin, miten tämä toimii.
Koko sivun suoratoisto
Luodaan loading.tsx-tiedosto dashboard-kansioon, jotta voidaan lisätä latausanimaatio koko hallintapaneelin sivulle.
loading.tsx: Tämä on Next.js:n erikoistiedosto, joka käyttääSuspense. Sen avulla voidaan luoda väliaikainen käyttöliittymä (fallback UI), joka näytetään, kun sivun pääsisältö latautuu;- Koska
<Sidebar>on staattinen (ei muutu), se näkyy heti. Käyttäjät voivat käyttää sitä, vaikka dynaaminen sisältö latautuu.
Hienoa työtä! Olet juuri käyttänyt suoratoistoa.
Virheen korjaaminen
Nykyinen ongelma on, että loading.tsx-tiedostossa käytetty latausanimaatio koskee kaikkia dashboard-kansion sivuja. Mutta entä jos tarvitsemme jokaiselle sovellussivulle omat käyttöliittymäelementit?
Tämän virheen korjaamiseksi voidaan käyttää reittiryhmiä (Route Groups). Luo (overview)-kansio dashboard-hakemistoon ja siirrä loading.tsx- ja page.tsx-tiedostot sinne.
Näin loading.tsx-tiedosto koskee vain hallintapaneelin sivua ja ongelma ratkeaa.
Reittiryhmät auttavat järjestämään tiedostoja selkeästi muuttamatta verkko-osoitetta. Kun luomme kansion, jonka nimessä on sulkeet (), kansion nimi ei näy verkko-osoitteessa. Esimerkiksi /dashboard/(overview)/page.tsx näkyy vain muodossa /dashboard.
Kiitos palautteestasi!
