Ja esat izmantojis tīmekļa vai mobilo lietotni, iespējams, esat redzējis ekrāna skeletu. Šī lietotāja interfeisa ierīce nodrošina vienmērīgāku pieredzi, ja atjauninājums ir atkarīgs no datu saņemšanas, kas var aizņemt kādu laiku.
Uzziniet, kas tieši ir ekrāna skelets, kāpēc jūs varētu vēlēties tos izmantot savā lietotnē un kā tos ieviest vietnē Next.js.
Kas ir skeleta ekrāns?
Skeleta ekrāns ir lietotāja saskarnes elements, kas norāda, ka kaut kas tiek ielādēts. Parasti tas ir tukšs vai “tukšs” lietotāja interfeisa komponenta stāvoklis bez jebkādiem datiem. Piemēram, ja vēlaties ielādēt vienumu sarakstu no datu bāzes, skeleta ekrāns varētu būt vienkāršs saraksts bez datiem, tikai viettura lodziņa elementi.
Daudzās vietnēs un lietotnēs tiek izmantoti skeleta ekrāni. Daži tos izmanto ielādes stāvoklim, bet citi tos izmanto kā veidu, kā uzlabot uztverto veiktspēju.
Kāpēc izmantot skeleta ekrānu?
Ir daži iemesli, kāpēc jūs varētu vēlēties lietotnē Next.js izmantot ekrāna skeletu.
Pirmkārt, tas var uzlabot jūsu lietotnes uztverto veiktspēju. Ja datu ielādes laikā lietotāji redz tukšu ekrānu, viņi var pieņemt, ka lietotne darbojas lēni vai nedarbojas pareizi. Tomēr, ja viņi redz skeleta ekrānu, viņi zina, ka dati tiek ielādēti un lietotne darbojas, kā paredzēts.
Otrkārt, skeleta ekrāni var palīdzēt samazināt lietotāja interfeisa netīrumus vai satricinājumus. Ja dati tiek ielādēti asinhroni, lietotāja saskarne var pakāpeniski atjaunināt, kad jūsu lietotne saņem datus. Tas var nodrošināt vienmērīgāku lietotāja pieredzi.
Treškārt, skeleta ekrāni var nodrošināt labāku lietotāja pieredzi, ja dati tiek ielādēti no lēna vai neuzticama savienojuma. Ja dati tiek iegūti no attālā servera, pastāv iespēja, ka savienojums var būt lēns vai pārtraukts. Šādos gadījumos var būt noderīgi parādīt skeleta ekrānu, lai lietotāji zinātu, ka dati tiek ielādēti, pat ja tas aizņem kādu laiku.
Kā ieviest skeleta ekrānu vietnē Next.js
Ir daži veidi, kā ieviest skeleta ekrānus programmā Next.js. Varat izmantot iebūvētās funkcijas, lai manuāli atjaunotu vienkāršu ekrāna skeletu. Vai arī varat izmantot bibliotēku, piemēram, reaģēt-slodzes-skelets vai materiāla lietotāja saskarne, lai paveiktu darbu jūsu vietā.
1. metode: iebūvēto līdzekļu izmantošana
Vietnē Next.js varat izmantot dažādi React āķi un vienkārši nosacījumi, lai parādītu skeleta ekrānus. Jūs varat izmantot && atbalsts, lai nosacīti renderētu skeleta ekrānus.
imports {useState, useEffect} no "reaģēt";funkcijuMyComponent() {
konst [isLoading, setIsLoading] = useState(taisnība);useEffect(() => {
setTimeout(() => setIsLoading(viltus), 1000);
}, []);atgriezties (
<div>
{Notiek ielāde && (
<div>
Notiek ielāde...
</div>
)}
{!Notiek ielāde && (
<div>
Mans komponenta saturs.
</div>
)}
</div>
);
}
eksportētnoklusējuma MyComponent;
Iepriekš minētais kods izmanto useState āķis, lai izsekotu, vai dati tiek ielādēti (Notiek ielāde). Tas izmanto useEffect āķis, lai simulētu datu ielādi asinhroni. Visbeidzot, tas izmanto && operatoru, lai nosacīti renderētu skeleta ekrānu vai komponenta saturu.
Šī metode nav ideāla, jo tai ir nepieciešams manuāli iestatīt Notiek ielāde stāvokli un simulē datu ielādi. Tomēr tas ir vienkāršs veids, kā ieviest skeleta ekrānu programmā Next.js.
2. metode: izmantojot tādu bibliotēku kā “Reaģēt-ielādē-skelets”
Vēl viens veids, kā ieviest skeleta ekrānus, ir izmantot līdzīgu bibliotēku reaģēt-slodzes-skelets. react-loading-skeleton ir React komponents, ko varat izmantot, lai izveidotu skeleta ekrānus. Tam ir a komponents, ko varat apvilkt ap jebkuru lietotāja interfeisa elementu.
Lai izmantotu react-loading-skeleton, jums tas jāinstalē, izmantojot npm.
npm i reaģē-ielādē-skeletsKad tas ir instalēts, varat to importēt savā lietotnē Next.js un izmantot šādi:
imports Reaģēt no "reaģēt";
imports Skelets no 'reaģēt-slodzes skelets';
imports 'reaģēt-loading-skeleton/dist/skeleton.css'konst Lietotne = () => {
atgriezties (
<div>
<Skelets />
<h3>Otrais ekrāns</h3>
<Skeleta augstums={40} />
</div>
);
};
eksportētnoklusējuma Lietotne;
Iepriekš minētais kods importē Skelets komponents no reaģēšanas ielādes skeleta bibliotēkas. Pēc tam tas to izmanto, lai izveidotu divus skeleta ekrānus. Tas izmanto augstums atbalsts, lai iestatītu skeleta ekrāna augstumu. Tagad Tu vari izmantojiet nosacījumu renderēšanu atveidot komponentu tikai tad, ja ir pieejami dati.
3. metode: materiāla lietotāja interfeisa izmantošana
Ja savā Next.js lietotnē izmantojat Material UI, varat izmantot komponents no @mui/materiāls bibliotēka. The
Lai izmantotu
npm instalēšana @mui/materialKad tas ir instalēts, varat to importēt savā lietotnē Next.js un izmantot šādi:
imports Reaģēt no "reaģēt";
imports Skelets no '@mui/material/Skeleton';konst Lietotne = () => {
atgriezties (
<div>
<Skeleta variants="taisn" platums={210} augstums={118} />
<h3>Otrais ekrāns</h3>
<Skeleta variants="tekstu" />
</div>
);
};
eksportētnoklusējuma Lietotne;
Iepriekš minētais kods importē Skelets komponents no @material-ui/lab bibliotēka. Pēc tam tiek izveidoti divi skeleta ekrāni. The variants prop iestata skeleta ekrāna veidu. The platums un augstums rekvizīti nosaka skeleta ekrāna izmērus.
Skeleta ekrāniem varat pievienot arī dažādas animācijas. Materiāla lietotāja saskarnē ir dažas iebūvētas animācijas, kuras varat izmantot. Piemēram, varat izmantot animēt rekvizīts, lai jūsu skeleta ekrāniem pievienotu izzūdošu animāciju:
imports Reaģēt no "reaģēt";
imports Skelets no '@mui/material/Skeleton';konst Lietotne = () => {
atgriezties (
<div>
<Skeleta variants="taisn" platums={210} augstums={118} />
<h3>Otrais ekrāns</h3>
<Skeleta variants="tekstu" animēt ="vilnis" />
</div>
);
};
eksportētnoklusējuma Lietotne;
Pievienojot animēt atbalsts uz a komponentu, savā lietotāja saskarnē varat iekļaut vizuālu kustību. The vilnis vērtība pievieno viļņojošu animāciju skeleta ekrānam. Tagad varat izmantot nosacījumu renderēšanu, lai rādītu saturu pēc ekrāna skeleta.
Uzlabojiet lietotāja pieredzi ar skeleta ekrāniem
Skeleta ekrāni var būt lielisks veids, kā uzlabot lietotnes Next.js lietotāja pieredzi. Tie var palielināt uztveramo ātrumu, samazināt atgrūšanu un piedāvāt labāku pieredzi, kad dati tiek pārraidīti lēnā vai nestabilā savienojumā.
Neatkarīgi no tā, kādu metodi izvēlaties ekrānu skeleta pievienošanai, tie ir lielisks veids, kā uzlabot lietotnes Next.js lietotāja pieredzi.
