Het laden van gebruikersinterfaces en visuele elementen zijn belangrijke componenten in web- en mobiele applicaties; ze spelen een cruciale rol bij het verbeteren van de gebruikerservaring en betrokkenheid. Zonder dergelijke signalen zouden gebruikers verbaasd en onzeker kunnen raken over de vraag of de applicatie goed functioneert, of ze de juiste acties hebben geactiveerd, of dat hun acties worden verwerkt.

Door gebruikers te voorzien van verschillende visuele signalen die wijzen op lopende verwerking, kunt u deze problemen effectief beperken elke vorm van onzekerheid en frustratie – wat hen er uiteindelijk van weerhoudt de applicatie voortijdig te verlaten.

Impact van het laden van gebruikersinterfaces op de prestaties en gebruikerservaring

De tien heuristieken van Jakob Nielsen voor het ontwerpen van gebruikersinterfaces benadrukken het belang om ervoor te zorgen dat de huidige systeemstatus zichtbaar is voor eindgebruikers. Dit principe benadrukt de behoefte aan componenten van de gebruikersinterface, zoals het laden van gebruikersinterfaces en andere feedback-UI elementen om gebruikers snel de juiste feedback te geven, over lopende processen, en binnen de vereiste grenzen tijdsspanne.

Het laden van gebruikersinterfaces speelt een cruciale rol bij het vormgeven van de algehele prestaties en gebruikerservaring van applicaties. Vanuit prestatieperspectief kan het implementeren van effectieve laadschermen de snelheid en het reactievermogen van een webapplicatie aanzienlijk verbeteren.

Idealiter maakt het effectief gebruik van laad-UI's het asynchrone laden van inhoud mogelijk. Dit voorkomt dat de hele pagina vastloopt terwijl specifieke componenten op de achtergrond worden geladen; in wezen, het creëren van een soepelere browse-ervaring.

Door een duidelijke visuele indicatie van lopende processen te bieden, is de kans groter dat gebruikers geduldig wachten op het ophalen van de inhoud.

Aan de slag met React Suspense in Next.js 13

Spanning is een React-component die asynchrone bewerkingen beheert die op de achtergrond worden uitgevoerd, zoals het ophalen van gegevens. Simpel gezegd kunt u met deze component een fallback-component renderen totdat de beoogde onderliggende component wordt geactiveerd en de vereiste gegevens laadt.

Hier is een voorbeeld van hoe Suspense werkt. Laten we aannemen dat u een component heeft die gegevens ophaalt uit een API.

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

Suspense zal de Bezig met laden component tot de inhoud van de Todos component is klaar met laden en is klaar voor weergave. Hier is de Suspense-syntaxis om dit te bereiken:

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

 </Suspense>
 </>
 );}

Next.js 13 Ondersteunt React Suspense

Next.js 13 heeft ondersteuning voor Suspense toegevoegd via de app-directoryfunctie. Eigenlijk, werken met de app-map Hiermee kunt u paginabestanden voor een bepaalde route in een speciale map opnemen en ordenen.

Binnen deze routemap kunt u een laden.js bestand, dat Next.js vervolgens zal gebruiken als de fallback-component om de laad-UI weer te geven voordat de onderliggende component met zijn gegevens wordt weergegeven.

Laten we nu React Suspense integreren in Next.js 13 door een demo To-Do-applicatie te bouwen.

U kunt de code van dit project vinden in zijn GitHub opslagplaats.

Maak een Next.js 13-project

U bouwt een eenvoudige applicatie die een lijst met taken ophaalt uit het DummyJSON-API eindpunt. Voer om te beginnen de onderstaande opdracht uit om Next.js 13 te installeren.

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

Definieer een Todos-route

Binnen in de src/app directory, maak een nieuwe map en geef deze een naam Todos. Voeg in deze map een nieuw pagina.js bestand en voeg de onderstaande code toe.

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;

De asynchrone functie, Todos, haalt een lijst met taken op uit de DummyJSON API. Vervolgens wordt de reeks opgehaalde taken doorzocht om een ​​lijst met taken op de browserpagina weer te geven.

Bovendien bevat de code een asynchroon wachten functie die een vertraging simuleert, waardoor een scenario ontstaat waarin een gebruiker gedurende een bepaalde tijd een laad-UI kan zien voordat de opgehaalde taken worden weergegeven.

In een realistischer gebruiksscenario; in plaats van een vertraging te simuleren, kunnen situaties zoals verwerkingsactiviteiten binnen applicaties, het ophalen van gegevens uit databases, het verbruiken van de API's, of zelfs trage API-responstijden zouden enkele korte vertragingen veroorzaken.

Integreer React Suspense in de Next.js-applicatie

Open de app/lay-out.js bestand en update de standaard Next.js-code met de volgende code.

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>
 )
}

De app/lay-out.js -bestand in Next.js 13 fungeert als een centrale lay-outcomponent die de algemene structuur en het gedrag van de lay-out van de applicatie definieert. In dit geval passeert u de kinderen prop voor de Spanning component, zorgt ervoor dat de lay-out een omhulsel wordt voor de volledige inhoud van de applicatie.

De Spanning component zal de Bezig met laden component als reserve terwijl de onderliggende componenten hun inhoud asynchroon laden; waarmee aan de gebruiker wordt aangegeven dat inhoud op de achtergrond wordt opgehaald of verwerkt.

Werk het thuisroutebestand bij

Open de app/pagina.js bestand, verwijder de standaard Next.js-code en voeg de onderstaande code toe.

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;

Maak het bestandloading.js

Ga ten slotte door en maak een laden.js bestand binnen de app/Todos map. Voeg in dit bestand de onderstaande code toe.

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

Moderne spinners toevoegen aan de laad-UI-component

De laad-UI-component die u hebt gemaakt, is erg eenvoudig; je kunt er optioneel voor kiezen om skeletschermen toe te voegen. Als alternatief kunt u aangepaste laadcomponenten maken en vormgeven gebruik Tailwind CSS in uw Next.js-applicatie. Voeg vervolgens gebruiksvriendelijke laadanimaties toe, zoals spinners die worden geleverd door pakketten zoals Reageer Spinners.

Om dit pakket te gebruiken, moet u het in uw project installeren.

npm install react-loader-spinner --save

Update vervolgens uw laden.js bestand als volgt:

"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;

Nu zal de laadinterface een laadbericht weergeven en een roterende lijnenspinneranimatie weergeven om aan te geven dat de verwerking bezig is tijdens het ophalen van Todos-gegevens.

Verbeter de gebruikerservaring met het laden van gebruikersinterfaces

Het opnemen van laad-UI's in uw webapplicaties kan de gebruikerservaring aanzienlijk verbeteren. Door gebruikers visuele aanwijzingen te geven tijdens asynchrone activiteiten, kunt u hun zorgen en onzekerheden effectief minimaliseren en daarmee hun betrokkenheid maximaliseren.