Ponudite takojšnje povratne informacije uporabnikom v svojih aplikacijah Next.js z vključitvijo uporabniških vmesnikov za nalaganje, ki se prikažejo med izvajanjem določenih dejanj.

Nalaganje uporabniških vmesnikov in vizualnih elementov so pomembne komponente v spletnih in mobilnih aplikacijah; imajo ključno vlogo pri izboljšanju uporabniške izkušnje in sodelovanja. Brez takih namigov bi lahko uporabniki postali zmedeni in negotovi glede tega, ali aplikacija deluje pravilno, ali so sprožili prava dejanja ali ali se njihova dejanja obdelujejo.

Če uporabnikom zagotovite različne vizualne namige, ki kažejo na tekočo obdelavo, jih lahko učinkovito ublažite kakršne koli oblike negotovosti in frustracije – kar jih na koncu odvrne od predčasnega izstopa iz aplikacije.

Vpliv nalaganja uporabniških vmesnikov na zmogljivost in uporabniško izkušnjo

Deset hevristik Jakoba Nielsena za oblikovanje uporabniškega vmesnika poudarja pomen zagotavljanja, da je trenutno stanje sistema vidno končnim uporabnikom. To načelo poudarja potrebo po komponentah uporabniškega vmesnika, kot so uporabniški vmesniki za nalaganje in drugi uporabniški vmesniki s povratnimi informacijami elemente za takojšnje zagotavljanje ustreznih povratnih informacij uporabnikom o tekočih procesih in v okviru zahtevanega časovni okvir.

instagram viewer

Uporabniški vmesniki za nalaganje igrajo ključno vlogo pri oblikovanju celotne zmogljivosti in uporabniške izkušnje aplikacij. Z vidika zmogljivosti lahko implementacija učinkovitih nalagalnih zaslonov znatno poveča hitrost in odzivnost spletne aplikacije.

V idealnem primeru učinkovita uporaba uporabniških vmesnikov za nalaganje omogoča asinhrono nalaganje vsebine – to preprečuje zamrznitev celotne strani, medtem ko se določene komponente nalagajo v ozadju; v bistvu ustvarja bolj gladko izkušnjo brskanja.

Poleg tega je večja verjetnost, da bodo uporabniki potrpežljivo čakali na pridobitev vsebine, saj nudijo jasen vizualni prikaz tekočih procesov.

Začetek uporabe React Suspense v Next.js 13

Napetost je komponenta React, ki upravlja asinhrone operacije, ki se izvajajo v ozadju, kot je pridobivanje podatkov. Preprosto povedano, ta komponenta vam omogoča upodabljanje rezervne komponente, dokler se nameravana podrejena komponenta ne namesti in naloži zahtevanih podatkov.

Tukaj je primer, kako deluje Suspenz. Predpostavimo, da imate komponento, ki pridobiva podatke iz API-ja.

exportdefaultfunctionTodos() {
const data = fetchData() {
//fetch data...
return data;
 };
return<h1> {data.title} h1>
}
// the fallback component
exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Napetost bo prikazala nalaganje komponento do vsebine Todos komponenta konča nalaganje in je pripravljena za upodabljanje. Tukaj je sintaksa Suspense za dosego tega:

import { Suspense } from'react';
functionApp() {
return (
 <>
}>

 </Suspense>
 </>
 );}

Next.js 13 podpira React Suspenz

Next.js 13 je dodal podporo za Suspense prek funkcije imenika aplikacij. v bistvu, delo z imenikom aplikacij vam omogoča, da vključite in organizirate datoteke strani za določeno pot znotraj namenske mape.

V ta imenik poti lahko vključite a nalaganje.js datoteko, ki jo bo Next.js nato uporabil kot nadomestno komponento za prikaz uporabniškega vmesnika za nalaganje, preden upodablja podrejeno komponento z njenimi podatki.

Zdaj pa integrirajmo React Suspense v Next.js 13 z izdelavo predstavitvene aplikacije To-Do.

Kodo tega projekta najdete v GitHub repozitorij.

Ustvarite projekt Next.js 13

Ustvarili boste preprosto aplikacijo, ki pridobi seznam opravil iz API DummyJSON končna točka. Za začetek zaženite spodnji ukaz za namestitev Next.js 13.

npx create-next-app@latest next-project --experimental-app

Določite Todos Route

Znotraj src/app ustvarite novo mapo in jo poimenujte Todos. Znotraj te mape dodajte novo page.js datoteko in vključite spodnjo kodo.

asyncfunctionTodos() {
asyncfunctionfetchTodos() {
let res = await fetch("https://dummyjson.com/todos");
const todosData = await res.json();
return todosData
 }


const {todos} = await fetchTodos();


asyncfunctionwait(ms) {
returnnewPromise(resolve => setTimeout(resolve, ms));
 }


await wait(3000); 


return (
 <> 


"todo-container">
"todo-list">
 {todos.slice(0, 10).map((todo) => (
    

    "todos">
  • 
<h2>{todo.todo}h2> </li>
     </div>
     </ul>
     ))}
     </div>
     </div>
     </>
     );
    • 

    







}
exportdefault Todos;

asinhrona funkcija, Todos, pridobi seznam opravil iz API-ja DummyJSON. Nato se preslika skozi niz pridobljenih opravil, da prikaže seznam opravil na strani brskalnika.

Poleg tega koda vključuje asinhrono čakati funkcija, ki simulira zakasnitev in ustvari scenarij, ki bo uporabniku omogočil ogled nalagalnega uporabniškega vmesnika za določen čas, preden prikaže pridobljena opravila.

V bolj realističnem primeru uporabe; namesto simulacije zakasnitve, situacije, kot so dejavnosti obdelave znotraj aplikacij, pridobivanje podatkov iz baz podatkov, porabo API-jev, ali celo počasni odzivni časi API-ja bi povzročili nekaj kratkih zamud.

Integrirajte React Suspenz v aplikacijo Next.js

Odprite app/layout.js datoteko in posodobite predlogo kode Next.js z naslednjo kodo.

import React, { Suspense } from'react';
import Loading from'@/app/Todos/loading';
exportconst metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
}
exportdefaultfunctionRootLayout({ children }) {
return (
"en">

}>
 {children}
 </Suspense>
 </body>
 </html>
 )
}

The app/layout.js Datoteka v Next.js 13 služi kot osrednja komponenta postavitve, ki definira celotno strukturo in obnašanje postavitve aplikacije. V tem primeru mimo otroci prop na Napetost zagotavlja, da postavitev postane ovoj za celotno vsebino aplikacije.

The Napetost komponenta bo prikazala nalaganje komponenta kot rezerva, medtem ko podrejene komponente asinhrono nalagajo svojo vsebino; ki uporabniku sporoča, da se vsebina pridobiva ali obdeluje v ozadju.

Posodobite datoteko domače poti

Odprite app/page.js datoteko, izbrišite predlogo kode Next.js in dodajte spodnjo kodo.

import React from'react';
import Link from"next/link";
functionHome () {
return (



Next.js 13 React Suspense Loading Example</h1>
"/Todos">Get Todos</Link>
 </div>
 </main>
 )
}


exportdefault Home;

Ustvarite datoteko loading.js

Končno nadaljujte in ustvarite nalaganje.js datoteka znotraj app/Todos imenik. V to datoteko dodajte spodnjo kodo.

exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Dodajanje sodobnih vrtavk v komponento uporabniškega vmesnika za nalaganje

Komponenta uporabniškega vmesnika za nalaganje, ki ste jo ustvarili, je zelo osnovna; po želji lahko dodate skeletne zaslone. Lahko pa ustvarite in oblikujete komponente za nalaganje po meri z uporabo Tailwind CSS v vaši aplikaciji Next.js. Nato dodajte uporabniku prijazne animacije nalaganja, kot so vrtavke, ki jih ponujajo paketi, kot je npr React Spinners.

Če želite uporabiti ta paket, ga namestite v svoj projekt.

npm install react-loader-spinner --save

Nato posodobite svoje nalaganje.js datoteko na naslednji način:

"use client"
import { RotatingLines} from'react-loader-spinner'
functionLoading() {
return (




Loading the Todos ...</p> 
 strokeColor="grey"
 strokeWidth="5"
 animationDuration="0.75"
 width="96"
 visible={true}
 />
 </div>
 );
}


exportdefault Loading;

Zdaj bo uporabniški vmesnik za nalaganje prikazal sporočilo o nalaganju in upodobil animacijo vrtljivega vrtljivega črte, ki označuje tekočo obdelavo med pridobivanjem podatkov Todos.

Izboljšajte uporabniško izkušnjo z nalaganjem uporabniških vmesnikov

Vključitev uporabniških vmesnikov za nalaganje v vaše spletne aplikacije lahko bistveno izboljša uporabniško izkušnjo. Z zagotavljanjem vizualnih namigov uporabnikom med asinhronimi operacijami lahko učinkovito zmanjšate njihove skrbi in morebitne negotovosti ter posledično povečate njihovo angažiranost.