Jak tworzyć ładujące się interfejsy użytkownika w Next.js 13 przy użyciu React Suspense

Ładowanie interfejsu użytkownika i elementów wizualnych to ważne elementy aplikacji internetowych i mobilnych; odgrywają one kluczową rolę w zwiększaniu doświadczenia i zaangażowania użytkowników. Bez takich wskazówek użytkownicy mogą stać się zdezorientowani i niepewni, czy aplikacja działa poprawnie, czy uruchomili właściwe działania lub czy ich działania są przetwarzane.

Stwierdzono, że wskazywanie użytkownikom trwającego przetwarzania za pomocą różnych wskazówek wizualnych łagodzi wszelkie uczucia niepewności lub frustracji, których mogą doświadczyć, zapobiegając w ten sposób przedwczesnemu opuszczeniu aplikacji.

Wpływ ładowania interfejsu użytkownika na wydajność i wrażenia użytkownika

Dziesięć heurystyk Jakoba Nielsena dotyczących projektowania interfejsu użytkownika podkreśla znaczenie umożliwienia użytkownikom końcowym postrzegania aktualnego stanu systemu. Zasada ta sugeruje, że elementy interfejsu użytkownika, w tym interfejsy ładowania i różne elementy sprzężenia zwrotnego, powinny dostarczać terminowe powiadomienia dotyczące postępu operacji i przestrzegać wyznaczonych ram czasowych.

Wdrożenie wydajnych ekranów ładowania ma kluczowe znaczenie dla zwiększenia zarówno wydajności, jak i komfortu użytkowania aplikacji. Jeśli chodzi o wydajność, ekrany te mogą znacznie poprawić szybkość i szybkość reakcji aplikacji internetowej.

Optymalne wykorzystanie interfejsów użytkownika ułatwia asynchroniczne ładowanie treści, co wyklucza stagnację całej strony internetowej podczas procesu jednoczesnego ładowania określonych elementów w tle. W konsekwencji skutkuje to lepszym doświadczeniem przeglądania charakteryzującym się płynną nawigacją.

Dodatkowo, zapewnienie widocznej wizualnej reprezentacji bieżących operacji może zachęcić użytkowników do wykazania się większą tolerancją podczas oczekiwania na pozyskanie danych.

Pierwsze kroki z React Suspense w Next.js 13

Suspense to komponent React, który zarządza asynchronicznymi operacjami działającymi w tle, takimi jak pobieranie danych. Mówiąc prościej, komponent ten pozwala na renderowanie komponentu awaryjnego do czasu, aż zamierzony komponent potomny zostanie zamontowany i załaduje wymagane dane.

Rozważmy scenariusz, w którym moduł pobiera informacje z usługi internetowej, jak pokazano na poniższej ilustracji. W tym przypadku rozważymy hipotetyczne ramy, w których element interfejsu użytkownika pozyskuje dane z internetowego interfejsu programowania aplikacji (API).

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

Implementacja suspense w React pozwala na asynchroniczne pobieranie danych przy jednoczesnym zachowaniu płynnego doświadczenia użytkownika poprzez wyświetlanie komponentu zastępczego, takiego jak element “Loading”, zamiast pozostawiania strony pustej lub zamrożonej podczas procesu pobierania danych. Wykorzystując dostarczony fragment kodu, który zawiera komponent “Todos” zwracający tablicę zadań, stan ładowania jest skutecznie zarządzany za pomocą Suspense API, zapewniając, że aplikacja pozostaje responsywna i interaktywna nawet podczas oczekiwania na załadowanie danych.

 import { Suspense } from 'react';

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

Next.js 13 obsługuje React Suspense

Next.js w wersji 13 wprowadził innowacyjne podejście do poprawy komfortu użytkowania poprzez integrację funkcji Suspense za pośrednictwem przełomowej funkcji App Directory. Funkcja ta umożliwia programistom strategiczne zarządzanie i rozmieszczanie komponentów strony specyficznych dla poszczególnych tras w wyznaczonym folderze. Wykorzystując tę technikę, możliwe staje się usprawnienie organizacji projektu przy jednoczesnej optymalizacji poziomów wydajności.

W określonym katalogu trasy możliwe jest włączenie pliku “loading.js”, który Next.js będzie następnie wykorzystywał jako domyślny komponent do wyświetlania interfejsu użytkownika ładowania przed renderowaniem komponentu podrzędnego wraz z jego danymi.

Włączenie React Suspense w ramach Next.js w wersji 13 jest skutecznym podejściem do stworzenia kompleksowej demonstracji aplikacji To-Do.

Kod źródłowy tego projektu jest dostępny w repozytorium GitHub dewelopera.

Tworzenie projektu Next.js 13

Zbudujesz prostą aplikację, która pobiera listę zadań do wykonania z punktu końcowego DummyJSON API . Aby rozpocząć, uruchom poniższe polecenie, aby zainstalować Next.js 13.

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

Zdefiniuj trasę Todos

Wewnątrz katalogu “src/app” utwórz nowy podkatalog, który będzie nosił nazwę “Todos”. Następnie we wspomnianym podkatalogu wprowadź nowy dokument zatytułowany “page.js”, zawierający następujący kod.

 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; 

Funkcja asynchroniczna, oznaczona jako “Todos”, pobiera wyliczalną kolekcję zadań lub elementów z interfejsu API DummyJSON, wykorzystując operacje nieblokujące. Następnie iteruje po tym pozyskanym zestawie zadań i renderuje je w wizualnie reprezentowanym formacie na interfejsie użytkownika przeglądarki internetowej.

Ponadto program zawiera asynchroniczny mechanizm znany jako funkcja “wait”, która służy do symulacji okresu opóźnienia.Ten projekt umożliwia użytkownikom postrzeganie ładującego się interfejsu użytkownika przez z góry określony czas przed wyświetleniem pobranych zadań lub obiektów Todo.

W praktycznych scenariuszach, zamiast naśladować opóźnienia poprzez symulację, rzeczywiste zdarzenia, takie jak wykonywanie zadań w programach, pobieranie informacji z baz danych, korzystanie z usług zewnętrznych o wolniejszym czasie odpowiedzi i opóźnione odpowiedzi API mogą przyczynić się do tymczasowych opóźnień.

Zintegruj React Suspense w aplikacji Next.js

Zmodyfikuj zawartość pliku app/layout.js poprzez włączenie dostarczonego fragmentu kodu.

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

Plik App/Layout.js w Next.js w wersji 13 działa jako podstawowy element układu, który określa ogólny układ i funkcje projektu platformy. Udostępniając właściwość children komponentowi Suspense, umożliwia on układowi służyć jako obudowa dla całej zawartości zawartej w aplikacji.

Komponent Suspense służy jako symbol zastępczy podczas asynchronicznego renderowania jego komponentów podrzędnych, prezentując komponentLoading jako wizualną wskazówkę informującą użytkowników, że zawartość jest obecnie pobierana lub przetwarzana w tle.

Zaktualizuj plik trasy głównej

Otwórz plik “app/page.js”, usuń istniejący wcześniej domyślny kod z Next.js i wstaw następujące linie kodu:

 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; 

Utwórz plik loading.js

Przejdź dalej, tworząc plik loading.js w folderze app/Todos . W tym pliku umieść dostarczony fragment kodu.

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

Dodawanie nowoczesnych spinnerów do komponentu Loading UI

Utworzony komponent Loading UI jest bardzo podstawowy; opcjonalnie można dodać ekrany szkieletowe. Alternatywnie można tworzyć i stylizować niestandardowe komponenty ładowania za pomocą Tailwind CSS w aplikacji Next.js. Następnie dodaj przyjazne dla użytkownika animacje ładowania, takie jak spinnery dostarczane przez pakiety takie jak React Spinners .

Aby skorzystać z tego pakietu, zainstaluj go w swoim projekcie.

 npm install react-loader-spinner --save 

Następnie zaktualizuj swój plikloading.js w następujący sposób:

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

Interfejs użytkownika do ładowania stanu aplikacji będzie wyświetlał wizualną wskazówkę w postaci komunikatu o ładowaniu wraz z animowanym efektem rotacji, który służy jako wskazówka, że proces pobierania danych Todo jest obecnie w toku.

Poprawa doświadczenia użytkownika dzięki interfejsom ładowania

Integracja interfejsów ładowania w aplikacjach internetowych może znacznie poprawić ogólne doświadczenie użytkownika, oferując wizualne wskaźniki, które informują użytkowników o trwających procesach asynchronicznych. Takie podejście nie tylko zmniejsza obawy i dwuznaczność, ale także sprzyja zwiększonemu zaangażowaniu użytkowników.