Cách tạo giao diện người dùng tải trong Next.js 13 bằng React Suspense

Tải giao diện người dùng và các thành phần trực quan là các thành phần quan trọng trong ứng dụng web và thiết bị di động; chúng đóng vai trò then chốt trong việc nâng cao trải nghiệm và mức độ tương tác của người dùng. Nếu không có những tín hiệu như vậy, người dùng có thể trở nên bối rối và không chắc chắn liệu ứng dụng có hoạt động bình thường hay không, liệu họ có kích hoạt đúng hành động hay không hoặc liệu hành động của họ có đang được xử lý hay không.

Việc chỉ ra quá trình xử lý đang diễn ra cho người dùng thông qua các dấu hiệu trực quan khác nhau đã được chứng minh là giúp giảm bớt mọi cảm giác không chắc chắn hoặc thất vọng mà họ có thể gặp phải, do đó ngăn họ rời khỏi ứng dụng sớm.

Tác động của việc tải giao diện người dùng đến hiệu suất và trải nghiệm người dùng

Mười phương pháp phỏng đoán của Jakob Nielsen về thiết kế giao diện người dùng nhấn mạnh tầm quan trọng của việc cho phép người dùng cuối nhận thức được trạng thái hiện tại của hệ thống. Nguyên tắc này gợi ý rằng các thành phần giao diện người dùng, bao gồm giao diện tải và các yếu tố phản hồi khác nhau, phải cung cấp thông báo kịp thời về tiến trình hoạt động và tuân thủ khung thời gian đã chỉ định.

Việc triển khai màn hình tải hiệu quả là rất quan trọng để nâng cao cả hiệu suất và trải nghiệm người dùng của ứng dụng. Về hiệu suất, những màn hình này có thể cải thiện đáng kể tốc độ và khả năng phản hồi của ứng dụng web.

Việc tận dụng tối ưu giao diện người dùng sẽ tạo điều kiện cho việc tải nội dung không đồng bộ, giúp toàn bộ trang web không bị trì trệ trong quá trình các phần tử cụ thể được tải đồng thời ở chế độ nền. Do đó, điều này mang lại trải nghiệm duyệt web nâng cao được đặc trưng bởi khả năng điều hướng mượt mà.

Ngoài ra, việc cung cấp bản trình bày trực quan dễ thấy về các hoạt động hiện tại có thể khuyến khích người dùng thể hiện mức độ chấp nhận cao hơn trong khi chờ thu thập dữ liệu.

Bắt đầu với React Suspense trong Next.js 13

Suspense là thành phần React quản lý các hoạt động không đồng bộ chạy trong nền, chẳng hạn như tìm nạp dữ liệu. Nói một cách đơn giản, thành phần này cho phép bạn kết xuất thành phần dự phòng cho đến khi thành phần con dự định gắn kết và tải dữ liệu cần thiết.

Hãy xem xét một tình huống trong đó một mô-đun lấy thông tin từ một dịch vụ web, như được minh họa bằng hình minh họa tiếp theo. Trong trường hợp này, chúng ta sẽ xem xét một khung giả định trong đó thành phần giao diện người dùng thu thập dữ liệu từ giao diện lập trình ứng dụng (API) dựa trên 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> }

Việc triển khai tính năng chờ trong React cho phép tìm nạp dữ liệu không đồng bộ trong khi vẫn duy trì trải nghiệm người dùng liền mạch bằng cách hiển thị thành phần giữ chỗ, chẳng hạn như phần tử “Đang tải”, thay vì để trang trống hoặc bị đóng băng trong quá trình truy xuất dữ liệu. Bằng cách sử dụng đoạn mã được cung cấp, trong đó có thành phần “Todos” trả về một loạt tác vụ, trạng thái tải được quản lý hiệu quả thông qua việc sử dụng API Suspense, đảm bảo rằng ứng dụng vẫn phản hồi và tương tác ngay cả khi chờ tải dữ liệu.

 import { Suspense } from 'react';

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

Next.js 13 Hỗ trợ React Suspense

Next.js phiên bản 13 đã giới thiệu một cách tiếp cận sáng tạo nhằm nâng cao trải nghiệm người dùng bằng cách tích hợp chức năng Hồi hộp thông qua tính năng Thư mục ứng dụng đột phá của nó. Tính năng này cho phép các nhà phát triển quản lý và sắp xếp các thành phần trang cụ thể theo từng tuyến đường một cách chiến lược trong một thư mục được chỉ định. Bằng cách sử dụng kỹ thuật này, có thể hợp lý hóa tổ chức dự án đồng thời tối ưu hóa mức hiệu suất.

Trong thư mục tuyến đường được chỉ định, có thể kết hợp tệp “loading.js” mà Next.js sau đó sẽ sử dụng làm thành phần mặc định để hiển thị giao diện người dùng đang tải trước khi hiển thị thành phần con cùng với dữ liệu của nó.

Việc kết hợp React Suspense trong khuôn khổ Next.js phiên bản 13 là một cách tiếp cận hiệu quả để tạo ra bản trình diễn toàn diện về ứng dụng Việc cần làm.

Mã nguồn của dự án này có sẵn trên kho GitHub của nhà phát triển.

Tạo dự án Next.js 13

Bạn sẽ xây dựng một ứng dụng đơn giản tìm nạp danh sách việc cần làm từ điểm cuối DummyJSON API. Để bắt đầu, hãy chạy lệnh bên dưới để cài đặt Next.js 13.

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

Xác định lộ trình Todos

Bên trong thư mục “src/app”, thiết lập một thư mục con mới có tên là “Todos”. Sau đó, trong thư mục con nói trên, hãy cài đặt một tài liệu mới có tên “page.js”, kết hợp mã tiếp theo trong đó.

 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; 

Hàm không đồng bộ, được chỉ định là “Todos”, truy xuất một tập hợp tác vụ hoặc mục có thể đếm được từ API DummyJSON bằng cách sử dụng các hoạt động không chặn. Sau đó, nó lặp lại nhóm tác vụ đã thu được này và hiển thị chúng ở định dạng được trình bày trực quan trên giao diện người dùng của trình duyệt web.

Hơn nữa, chương trình còn kết hợp một cơ chế không đồng bộ được gọi là chức năng “chờ”, dùng để mô phỏng một khoảng thời gian trễ. Thiết kế này cho phép người dùng cảm nhận giao diện người dùng đang tải trong một khoảng thời gian định trước trước khi hiển thị các tác vụ hoặc đối tượng Todo được truy xuất.

Trong các tình huống thực tế, thay vì bắt chước độ trễ thông qua mô phỏng, các sự kiện thực tế như thực thi tác vụ trong chương trình phần mềm, truy xuất thông tin từ cơ sở dữ liệu, sử dụng các dịch vụ bên ngoài với thời gian phản hồi chậm hơn và phản hồi API bị trì hoãn đều có thể góp phần gây ra sự chậm trễ tạm thời.

Tích hợp React Suspense trong Ứng dụng Next.js

Vui lòng sửa đổi nội dung của tệp app/layout.js bằng cách kết hợp đoạn mã được cung cấp.

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

Tệp App/Layout.js trong Next.js phiên bản 13 hoạt động như một thành phần bố cục chính thiết lập cách sắp xếp chung và các chức năng của thiết kế nền tảng. Bằng cách cung cấp thuộc tính children cho thành phần Suspense, nó cho phép bố cục đóng vai trò như một lớp bọc cho tất cả nội dung có trong ứng dụng.

Thành phần Hồi hộp đóng vai trò là trình giữ chỗ trong quá trình hiển thị không đồng bộ của các thành phần con của nó, hiển thị Thành phần tải dưới dạng tín hiệu trực quan để thông báo cho người dùng rằng nội dung hiện đang được tìm nạp hoặc xử lý ở chế độ nền.

Cập nhật File Lộ trình Nhà

Vui lòng mở tệp “app/page.js”, xóa mọi mã mặc định có sẵn khỏi Next.js và chèn các dòng mã sau:

 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; 

Tạo tệp loading.js

Tiến xa hơn bằng cách thiết lập tệp load.js trong thư mục app/Todos. Trong tệp này, hãy kết hợp đoạn mã được cung cấp.

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

Thêm Spinner hiện đại vào Thành phần giao diện người dùng đang tải

Thành phần tải UI mà bạn đã tạo rất cơ bản; bạn có thể tùy ý chọn thêm màn hình khung xương. Ngoài ra, bạn có thể tạo và tạo kiểu cho các thành phần tải tùy chỉnh bằng CSS Tailwind trong ứng dụng Next.js của mình. Sau đó, thêm các hoạt ảnh tải thân thiện với người dùng như các công cụ quay vòng được cung cấp bởi các gói như React Spinners.

Để sử dụng gói này, hãy tiến hành cài đặt nó trong dự án của bạn.

 npm install react-loader-spinner --save 

Tiếp theo, cập nhật yourloading.jsfile như sau:

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

Giao diện người dùng để tải trạng thái của ứng dụng sẽ hiển thị tín hiệu trực quan dưới dạng thông báo tải cùng với hiệu ứng xoay hoạt hình, đóng vai trò là dấu hiệu cho thấy quá trình truy xuất dữ liệu Todo hiện đang được tiến hành.

Cải thiện trải nghiệm người dùng bằng cách tải giao diện người dùng

Việc tích hợp giao diện tải trong ứng dụng web có thể cải thiện rõ rệt trải nghiệm tổng thể của người dùng bằng cách cung cấp các chỉ báo trực quan thông báo cho người dùng về các quy trình không đồng bộ đang diễn ra. Cách tiếp cận này không chỉ làm giảm sự e ngại và mơ hồ mà còn thúc đẩy sự tham gia của người dùng tăng lên.