Zo maak je ladende UI's in Next.js 13 met React Suspense
Laadbare UI’s en visuele elementen zijn belangrijke onderdelen van web- en mobiele applicaties; ze spelen een cruciale rol bij het verbeteren van de gebruikerservaring en de betrokkenheid. Zonder dergelijke aanwijzingen kunnen gebruikers in verwarring raken en niet zeker weten of de applicatie goed werkt, of ze de juiste acties hebben gestart en of hun acties worden verwerkt.
Gebleken is dat het aangeven van de lopende verwerking aan gebruikers door middel van verschillende visuele signalen gevoelens van onzekerheid of frustratie kan verlichten, waardoor wordt voorkomen dat ze de applicatie voortijdig verlaten.
Invloed van ladende UI’s op prestaties en gebruikerservaring
Jakob Nielsens tien heuristieken voor het ontwerpen van gebruikersinterfaces onderstrepen het belang om eindgebruikers in staat te stellen de huidige status van een systeem waar te nemen. Dit principe suggereert dat onderdelen van de gebruikersinterface, waaronder laadinterfaces en verschillende feedbackelementen, tijdig meldingen moeten geven over de voortgang van de bewerking en zich moeten houden aan het aangewezen tijdsbestek.
De implementatie van efficiënte laadschermen is cruciaal voor het verbeteren van zowel de prestaties als de gebruikerservaring van een applicatie. Op het gebied van prestaties kunnen deze schermen de snelheid en reactiesnelheid van een webapplicatie sterk verbeteren.
Het optimaal benutten van gebruikersinterfaces vergemakkelijkt het asynchroon laden van inhoud, waardoor wordt voorkomen dat de hele webpagina stagneert tijdens het proces van het gelijktijdig laden van specifieke elementen op de achtergrond. Dit resulteert in een verbeterde browse-ervaring die wordt gekenmerkt door soepele navigatie.
Daarnaast kan het bieden van een opvallende visuele weergave van de huidige bewerkingen gebruikers aanmoedigen om een grotere tolerantie aan de dag te leggen tijdens het wachten op gegevensverwerving.
Aan de slag met React Suspense in Next.js 13
Suspense is een React-component dat asynchrone bewerkingen beheert die op de achtergrond worden uitgevoerd, zoals het ophalen van gegevens. Simpel gezegd kun je met dit component een fallback-component renderen totdat het bedoelde kind-component wordt gekoppeld en de vereiste gegevens worden geladen.
Beschouw een scenario waarin een module informatie ophaalt van een webservice, zoals de volgende illustratie laat zien. In dit geval zullen we een hypothetisch kader bekijken waarin een gebruikersinterface-element gegevens ophaalt van een toepassingsprogrammaverbinding (API) op het internet.
export default function Todos() {
const data = fetchData() {
//fetch data...
return data;
};
return <h1> {data.title} </h1>
}
// the fallback component
export default function Loading() {
return <p>Loading data ...</p> }
De implementatie van suspense in React maakt het mogelijk asynchroon gegevens op te halen en toch een naadloze gebruikerservaring te behouden door een placeholdercomponent weer te geven, zoals het element “Loading”, in plaats van de pagina leeg of bevroren te laten tijdens het ophalen van gegevens. Door gebruik te maken van het meegeleverde codefragment, waarin het “Todos”-element een reeks taken retourneert, wordt de laadstatus effectief beheerd met behulp van de Suspense API, zodat de applicatie responsief en interactief blijft, zelfs wanneer er wordt gewacht op het laden van gegevens.
import { Suspense } from 'react';
function App() {
return (
<>
<Suspense fallback={<Loading />}>
<Todos />
</Suspense>
</>
);}
Next.js 13 ondersteunt React Suspense
Next.js versie 13 heeft een innovatieve benadering geïntroduceerd voor het verbeteren van de gebruikerservaring door het integreren van Suspense functionaliteit via de baanbrekende App Directory functie. Met deze functie kunnen ontwikkelaars pagina-onderdelen die specifiek zijn voor individuele routes strategisch beheren en rangschikken in een aangewezen map. Door gebruik te maken van deze techniek wordt het mogelijk om de projectorganisatie te stroomlijnen en tegelijkertijd de prestatieniveaus te optimaliseren.
In de gespecificeerde routedirectory is het mogelijk om een bestand “loading.js” op te nemen dat Next.js vervolgens zal gebruiken als standaardcomponent voor het weergeven van de gebruikersinterface voor het laden voordat het kindcomponent met zijn gegevens wordt gerenderd.
React Suspense opnemen in het framework van Next.js versie 13 is een effectieve aanpak om een uitgebreide demonstratie van een To-Do toepassing te maken.
De broncode voor dit project is beschikbaar op de GitHub repository van de ontwikkelaar.
Een Next.js 13-project maken
Je zult een eenvoudige applicatie bouwen die een lijst met to-dos ophaalt van het DummyJSON API eindpunt. Voer om te beginnen het onderstaande commando uit om Next.js 13 te installeren.
npx create-next-app@latest next-project --experimental-app
Definieer een Todos-route
Maak in de map “src/app” een nieuwe submap aan die “Todos” wordt genoemd. Maak vervolgens in de genoemde subdirectory een nieuw document met de naam “page.js”, waarin de volgende code is opgenomen.
async function Todos() {
async function fetchTodos() {
let res = await fetch("https://dummyjson.com/todos");
const todosData = await res.json();
return todosData
}
const {todos} = await fetchTodos();
async function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
await wait(3000);
return (
<>
<div className="todo-container">
<div className="todo-list">
{todos.slice(0, 10).map((todo) => (
<ul key={todo.id}>
<div className="todos">
<li> <h2>{todo.todo}</h2> </li>
</div>
</ul>
))}
</div>
</div>
</>
);
}
export default Todos;
De asynchrone functie, aangeduid als “Todos”, haalt een opsommbare verzameling taken of items op uit de DummyJSON API met behulp van niet-blokkerende bewerkingen. Vervolgens wordt deze verzamelde verzameling taken doorlopen en visueel weergegeven op de gebruikersinterface van de webbrowser.
Verder bevat het programma een asynchroon mechanisme dat bekend staat als een “wacht”-functie, die dient om een periode van vertraging te simuleren.Dit ontwerp stelt gebruikers in staat om een ladende gebruikersinterface waar te nemen gedurende een vooraf bepaald interval voordat de opgehaalde taken of Todo-objecten worden getoond.
In praktische scenario’s kunnen, in plaats van het nabootsen van latentie door middel van simulatie, werkelijke gebeurtenissen zoals het uitvoeren van taken in softwareprogramma’s, het ophalen van informatie uit databases, het gebruik van externe services met langzamere responstijden en vertraagde API-reacties allemaal bijdragen aan tijdelijke vertragingen.
React Suspense integreren in de Next.js-applicatie
Wijzig de inhoud van het app/layout.js bestand door het bijgeleverde codefragment op te nemen.
import React, { Suspense } from 'react';
import Loading from '@/app/Todos/loading';
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body >
<Suspense fallback={<Loading />}>
{children}
</Suspense>
</body>
</html>
)
}
Het bestand App/Layout.js in Next.js versie 13 functioneert als een primair lay-out element dat de algemene indeling en functionaliteiten van het ontwerp van het platform vastlegt. Door de children eigenschap aan de Suspense component te geven, kan de lay-out dienen als een omhulsel voor alle inhoud binnen de applicatie.
De Suspense component dient als een placeholder tijdens de asynchrone rendering van zijn kindcomponenten en presenteert deLoadingcomponent als een visuele aanwijzing om gebruikers te informeren dat er op dit moment inhoud wordt opgehaald of verwerkt op de achtergrond.
Werk het Home Route-bestand bij
Open het bestand “app/page.js”, verwijder alle reeds bestaande standaardcode van Next.js en voeg de volgende regels code in:
import React from 'react';
import Link from "next/link";
function Home () {
return (
<main>
<div>
<h1>Next.js 13 React Suspense Loading Example</h1>
<Link href="/Todos">Get Todos</Link>
</div>
</main>
)
}
export default Home;
Maak het bestand loading.js
Ga verder door een bestand loading.js te maken in de map app/Todos . Neem in dit bestand het bijgeleverde codefragment op.
export default function Loading() {
return <p>Loading data ...</p> }
Moderne spinners toevoegen aan het UI-component voor laden
Het UI-component voor laden dat je hebt gemaakt is heel eenvoudig; je kunt ervoor kiezen om skeletschermen toe te voegen. Je kunt ook aangepaste laadcomponenten maken en stylen met Tailwind CSS in je Next.js-applicatie. Voeg vervolgens gebruiksvriendelijke laadanimaties toe, zoals spinners die worden geleverd door pakketten zoals React Spinners .
Om dit pakket te gebruiken, installeer je het in je project.
npm install react-loader-spinner --save
Werk vervolgens je bestandloading.js als volgt bij:
"use client"
import { RotatingLines} from 'react-loader-spinner'
function Loading() {
return (
<div>
<p>Loading the Todos ...</p>
<RotatingLines
strokeColor="grey"
strokeWidth="5"
animationDuration="0.75"
width="96"
visible={true}
/>
</div>
);
}
export default Loading;
De gebruikersinterface voor het laden van de toestand van de applicatie zal een visuele aanwijzing tonen in de vorm van een laadbericht samen met een geanimeerd rotatie-effect, dat dient als indicatie dat het proces van het ophalen van de Todo-gegevens momenteel plaatsvindt.
Verbeter de gebruikerservaring met laadinterfaces
Het integreren van laadinterfaces in webapplicaties kan de algehele gebruikerservaring aanzienlijk verbeteren door visuele indicatoren te bieden die gebruikers informeren over lopende asynchrone processen. Deze aanpak vermindert niet alleen ongerustheid en dubbelzinnigheid, maar bevordert ook een grotere betrokkenheid van de gebruiker.