Hur man skapar laddningsgränssnitt i Next.js 13 med hjälp av React Suspense

Laddning av användargränssnitt och visuella element är viktiga komponenter i webb- och mobilapplikationer; de spelar en avgörande roll för att förbättra användarupplevelsen och engagemanget. Utan sådana signaler kan användarna bli förbryllade och osäkra på om applikationen fungerar korrekt, om de utlöste rätt åtgärder eller om deras åtgärder håller på att bearbetas.

Att indikera pågående bearbetning för användarna genom olika visuella signaler har visat sig lindra eventuella känslor av osäkerhet eller frustration som de kan uppleva, vilket hindrar dem från att lämna applikationen i förtid.

Inverkan av laddade användargränssnitt på prestanda och användarupplevelse

Jakob Nielsens tio heuristiker för design av användargränssnitt understryker betydelsen av att slutanvändarna kan uppfatta systemets nuvarande tillstånd. Denna princip innebär att användargränssnittskomponenter, inklusive laddningsgränssnitt och olika återkopplingselement, bör tillhandahålla snabba meddelanden om hur arbetet fortskrider och följa den angivna tidsramen.

Implementeringen av effektiva laddningsskärmar är avgörande för att förbättra både prestanda och användarupplevelse för en applikation. När det gäller prestanda kan dessa skärmar avsevärt förbättra hastigheten och responsiviteten hos en webbapplikation.

Optimalt utnyttjande av användargränssnitt underlättar asynkron laddning av innehåll, vilket förhindrar att hela webbsidan stagnerar under processen när specifika element laddas samtidigt i bakgrunden. Följaktligen resulterar detta i en förbättrad surfupplevelse som kännetecknas av smidig navigering.

Dessutom kan en tydlig visuell representation av aktuella operationer uppmuntra användare att visa större tolerans medan de väntar på datainsamling.

Kom igång med React Suspense i Next.js 13

Suspense är en React-komponent som hanterar asynkrona operationer som körs i bakgrunden, t.ex. hämtning av data. Enkelt uttryckt kan du med denna komponent rendera en reservkomponent tills den avsedda underordnade komponenten monteras och laddar de data som krävs.

Tänk dig ett scenario där en modul hämtar information från en webbtjänst, vilket visas i följande illustration. I det här fallet ska vi titta på ett hypotetiskt ramverk där ett användargränssnittselement hämtar data från ett internetbaserat API (Application Programming Interface).

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

Implementeringen av suspense i React möjliggör asynkron datahämtning samtidigt som en sömlös användarupplevelse bibehålls genom att visa en platshållarkomponent, t.ex. elementet “Loading”, i stället för att lämna sidan tom eller frusen under datahämtningsprocessen. Genom att använda det medföljande kodavsnittet, som innehåller komponenten “Todos” som returnerar en rad uppgifter, hanteras laddningsstatusen effektivt genom användning av Suspense API, vilket säkerställer att applikationen förblir responsiv och interaktiv även när den väntar på att data ska laddas.

 import { Suspense } from 'react';

function App() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <Todos />
      </Suspense>
    </>
  );} 

Next.js 13 stöder React Suspense

Next.js version 13 har introducerat en innovativ metod för att förbättra användarupplevelsen genom att integrera Suspense-funktionalitet via sin banbrytande App Directory-funktion. Denna funktion gör det möjligt för utvecklare att strategiskt hantera och ordna sidkomponenter som är specifika för enskilda rutter i en särskild mapp. Genom att använda denna teknik blir det möjligt att effektivisera projektorganisationen och samtidigt optimera prestandanivåerna.

I den angivna ruttkatalogen är det möjligt att införliva en “loading.js”-fil som Next.js därefter kommer att använda som standardkomponent för att visa användargränssnittet för laddning innan underkomponenten renderas tillsammans med dess data.

Att integrera React Suspense inom ramen för Next.js version 13 är en effektiv metod för att skapa en omfattande demonstration av en Att-göra-applikation.

Källkoden för detta projekt finns tillgänglig på utvecklarens GitHub-arkiv.

Skapa ett Next.js 13-projekt

Du kommer att bygga en enkel applikation som hämtar en lista över att-göra från DummyJSON API slutpunkten. För att komma igång, kör kommandot nedan för att installera Next.js 13.

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

Definiera en Todos-väg

Inuti katalogen “src/app” skapar du en ny underkatalog som ska benämnas “Todos”. I den nämnda underkatalogen skapar du sedan ett nytt dokument med titeln “page.js” och infogar följande kod i det.

 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; 

Den asynkrona funktionen, som kallas “Todos”, hämtar en uppräkningsbar samling uppgifter eller objekt från DummyJSON API med hjälp av icke-blockerande operationer. Därefter itererar den över denna förvärvade uppsättning uppgifter och återger dem i ett visuellt representerat format på webbläsarens användargränssnitt.

Vidare innehåller programmet en asynkron mekanism som kallas en “wait”-funktion, som tjänar till att simulera en fördröjningsperiod.Denna design gör det möjligt för användare att uppfatta ett laddat användargränssnitt under ett förutbestämt intervall innan de hämtade uppgifterna eller Todo-objekten visas.

I praktiska scenarier kan faktiska händelser som att utföra uppgifter i program, hämta information från databaser, använda externa tjänster med långsammare svarstider och fördröjda API-svar bidra till tillfälliga fördröjningar, snarare än att efterlikna latens genom simulering.

Integrera React Suspense i Next.js-applikationen

Ändra innehållet i filen app/layout.js genom att införliva det medföljande kodavsnittet.

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

App/Layout.js-filen i Next.js version 13 fungerar som ett primärt layoutelement som fastställer det allmänna arrangemanget och funktionerna i plattformens design. Genom att förse Suspense-komponenten med egenskapen children kan layouten fungera som ett hölje för allt innehåll som finns i applikationen.

Komponenten Suspense fungerar som en platshållare under den asynkrona renderingen av dess underordnade komponenter och presenterar komponentenLoading som en visuell signal för att informera användarna om att innehåll för närvarande hämtas eller bearbetas i bakgrunden.

Uppdatera filen Home Route

Öppna filen “app/page.js”, ta bort eventuell befintlig standardkod från Next.js och infoga följande kodrader:

 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; 

Skapa filen loading.js

Gå vidare genom att skapa en fil loading.js i mappen app/Todos . Inkludera det medföljande kodavsnittet i den här filen.

 export default function Loading() {
  return <p>Loading data ...</p> } 

Lägga till moderna spinners till Loading UI-komponenten

Den Loading UI-komponent du skapade är mycket grundläggande; du kan eventuellt välja att lägga till skelettskärmar. Alternativt kan du skapa och utforma anpassade laddningskomponenter med Tailwind CSS i din Next.js-applikation. Lägg sedan till användarvänliga laddningsanimationer som spinners som tillhandahålls av paket som React Spinners .

Om du vill använda det här paketet installerar du det i ditt projekt.

 npm install react-loader-spinner --save 

Uppdatera sedan dinloading.j-fil enligt följande:

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

Användargränssnittet för laddning av applikationens status kommer att visa en visuell signal i form av ett laddningsmeddelande tillsammans med en animerad rotationseffekt, vilket fungerar som en indikation på att processen för att hämta Todo-data för närvarande pågår.

Förbättra användarupplevelsen med laddningsgränssnitt

Integrering av laddningsgränssnitt i webbapplikationer kan avsevärt förbättra den övergripande användarupplevelsen genom att erbjuda visuella indikatorer som informerar användarna om pågående asynkrona processer. Detta tillvägagångssätt minskar inte bara oro och tvetydighet utan främjar också ökat användarengagemang.