نحوه ایجاد رابط های کاربری بارگیری در Next.js 13 با استفاده از React Suspense

بازخورد فوری کاربر را در برنامه های Next.js خود با ترکیب رابط های کاربری بارگیری که در حین انجام برخی اقدامات ظاهر می شوند، ارائه دهید.

بارگیری رابط‌های کاربری و عناصر بصری اجزای مهمی در برنامه‌های کاربردی وب و موبایل هستند. آنها نقشی اساسی در افزایش تجربه و تعامل کاربر دارند. بدون چنین نشانه‌هایی، کاربران ممکن است در مورد اینکه آیا برنامه به درستی کار می‌کند، آیا اقدامات درستی را انجام داده‌اند یا اینکه آیا اقدامات آنها در حال پردازش است، متحیر و نامطمئن شوند.

با ارائه نشانه‌های بصری مختلف به کاربران که نشان‌دهنده پردازش مداوم است، می‌توانید به طور موثری هر نوع عدم اطمینان و ناامیدی را کاهش دهید و در نهایت آنها را از خروج زودهنگام از برنامه بازدارید.

تأثیر بارگیری رابط‌های کاربری بر عملکرد و تجربه کاربر

ده اکتشافی Jakob Nielsen برای طراحی رابط کاربری بر اهمیت حصول اطمینان از قابل مشاهده بودن وضعیت فعلی سیستم برای کاربران نهایی تأکید دارد. این اصل نیاز به مؤلفه‌های رابط کاربری مانند بارگیری رابط‌های کاربری و دیگر عناصر رابط کاربری بازخورد را برای ارائه سریع بازخورد مناسب، در مورد فرآیندهای در حال انجام و در چارچوب زمانی مورد نیاز، برجسته می‌کند.

رابط‌های کاربری بارگیری نقشی اساسی در شکل‌دهی عملکرد کلی و تجربه کاربری برنامه‌ها دارند. از منظر عملکرد، پیاده‌سازی صفحه‌های بارگذاری موثر می‌تواند به طور قابل توجهی سرعت و پاسخ‌دهی یک برنامه وب را افزایش دهد.

در حالت ایده‌آل، استفاده مؤثر از رابط‌های کاربری بارگیری، بارگذاری ناهمزمان محتوا را امکان‌پذیر می‌سازد – این از یخ زدن کل صفحه در حین بارگیری اجزای خاص در پس‌زمینه جلوگیری می‌کند. اساسا، ایجاد یک تجربه مرور روان تر.

علاوه بر این، با ارائه یک نشانه بصری واضح از فرآیندهای در حال انجام، کاربران احتمالاً صبورانه منتظر بازیابی محتوا هستند.

شروع با React Suspense در Next.js 13

Suspense یک جزء React است که عملیات ناهمزمان در حال اجرا در پس‌زمینه، مانند واکشی داده‌ها را مدیریت می‌کند. به زبان ساده، این مؤلفه به شما امکان می‌دهد تا زمانی که مؤلفه فرزند مورد نظر، داده‌های مورد نیاز را نصب و بارگذاری کند، یک مؤلفه بازگشتی ارائه کنید.

در اینجا مثالی از نحوه عملکرد Suspense آورده شده است. بیایید فرض کنیم شما یک مؤلفه دارید که داده ها را از یک 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> }

تا زمانی که محتوای کامپوننت Todos بارگذاری تمام شود و برای رندر آماده شود، Suspense مولفه Loading را نمایش می دهد. در اینجا نحو Suspense برای دستیابی به این است:

import { Suspense } from 'react';

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

Next.js 13 از React Suspense پشتیبانی می کند

Next.js 13 پشتیبانی از Suspense را از طریق ویژگی فهرست برنامه خود اضافه کرد. اساساً، کار با فهرست برنامه به شما امکان می دهد فایل های صفحه را برای یک مسیر خاص در یک پوشه اختصاصی گنجانده و سازماندهی کنید.

در این فهرست مسیر، می‌توانید یک فایل loading.js را اضافه کنید، که Next.js سپس از آن به‌عنوان مؤلفه بازگشتی برای نمایش رابط کاربری بارگیری قبل از رندر کردن مؤلفه فرزند با داده‌هایش استفاده می‌کند.

اکنون، بیایید React Suspense را با ساختن یک برنامه آزمایشی To-Do در Next.js 13 ادغام کنیم.

می توانید کد این پروژه را در مخزن GitHub آن پیدا کنید.

یک پروژه Next.js 13 ایجاد کنید

شما یک برنامه کاربردی ساده خواهید ساخت که لیستی از کارهای انجام شده را از نقطه پایانی DummyJSON API دریافت می کند. برای شروع، دستور زیر را برای نصب Next.js 13 اجرا کنید.

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

یک مسیر Todos را تعریف کنید

در پوشه src/app، یک پوشه جدید ایجاد کنید و نام آن را Todos بگذارید. در داخل این پوشه، یک فایل page.js جدید اضافه کنید و کد زیر را وارد کنید.

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;

تابع ناهمزمان، Todos، لیستی از کارها را از DummyJSON API دریافت می کند. سپس از طریق آرایه کارهای واکشی شده نقشه می‌کشد تا فهرستی از کارها را در صفحه مرورگر ارائه کند.

علاوه بر این، کد شامل یک تابع انتظار ناهمزمان است که تاخیر را شبیه‌سازی می‌کند و سناریویی را ایجاد می‌کند که به کاربر اجازه می‌دهد تا قبل از نمایش کارهای واکشی شده، یک UI بارگیری را برای مدت زمان مشخصی ببیند.

در یک مورد استفاده واقعی تر؛ به‌جای شبیه‌سازی تاخیر، موقعیت‌هایی مانند پردازش فعالیت‌ها در برنامه‌ها، واکشی داده‌ها از پایگاه‌های داده، مصرف API یا حتی زمان‌های پاسخ آهسته API باعث تأخیر کوتاهی می‌شود.

React Suspense را در برنامه Next.js ادغام کنید

فایل app/layout.js را باز کنید و کد Next.js boilerplate را با کد زیر به روز کنید.

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 در Next.js 13 به عنوان یک مؤلفه طرح‌بندی مرکزی عمل می‌کند که ساختار و رفتار کلی طرح‌بندی برنامه را تعریف می‌کند. در این مورد، انتقال تکیه‌گاه کودکان به مؤلفه Suspense، تضمین می‌کند که چیدمان به پوششی برای کل محتوای برنامه تبدیل می‌شود.

مؤلفه Suspense مؤلفه Loading را به‌عنوان نسخه بازگشتی نمایش می‌دهد در حالی که مؤلفه‌های فرزند محتوای خود را به‌صورت ناهمزمان بارگذاری می‌کنند. به کاربر نشان می دهد که محتوا در پس زمینه واکشی یا پردازش می شود.

فایل مسیر خانه را به روز کنید

فایل app/page.js را باز کنید، کد Next.js boilerplate را حذف کنید و کد زیر را اضافه کنید.

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;

فایل loading.js را ایجاد کنید

در نهایت، ادامه دهید و یک فایل loading.js در دایرکتوری app/Todos ایجاد کنید. داخل این فایل کد زیر را اضافه کنید.

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

افزودن اسپینرهای مدرن به مؤلفه رابط کاربری در حال بارگذاری

مؤلفه UI بارگیری که ایجاد کردید بسیار اساسی است. شما می توانید به صورت اختیاری انتخاب کنید که صفحه های اسکلت اضافه کنید. از طرف دیگر، می‌توانید با استفاده از Tailwind CSS در برنامه Next.js، مؤلفه‌های بارگیری سفارشی را ایجاد و استایل دهید. سپس، انیمیشن‌های بارگیری کاربرپسند مانند اسپینرهای ارائه شده توسط بسته‌هایی مانند React Spinners را اضافه کنید.

برای استفاده از این بسته، آن را در پروژه خود نصب کنید.

npm install react-loader-spinner --save

سپس فایل loading.js خود را به صورت زیر به روز کنید:

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

اکنون، رابط کاربری بارگیری پیام بارگیری را نمایش می‌دهد و یک انیمیشن چرخشی خطوط را ارائه می‌کند تا پردازش در حال انجام را در حین واکشی داده‌های Todos نشان دهد.

بهبود تجربه کاربر با بارگیری رابط‌های کاربری

گنجاندن UI های بارگذاری شده در برنامه های کاربردی وب شما می تواند تجربه کاربر را به میزان قابل توجهی افزایش دهد. با ارائه نشانه های بصری به کاربران در طول عملیات ناهمزمان، می توانید به طور موثر نگرانی و هرگونه عدم قطعیت را به حداقل برسانید و در نتیجه تعامل آنها را به حداکثر برسانید.

منبع مقاله