วิธีสร้าง UI การโหลดใน Next.js 13 โดยใช้ React Suspense

การโหลด UI และองค์ประกอบภาพเป็นองค์ประกอบที่สำคัญในแอปพลิเคชันบนเว็บและมือถือ พวกเขามีบทบาทสำคัญในการยกระดับประสบการณ์ผู้ใช้และการมีส่วนร่วม หากไม่มีสัญญาณดังกล่าว ผู้ใช้อาจสับสนและไม่แน่ใจว่าแอปพลิเคชันทำงานอย่างถูกต้องหรือไม่ กระตุ้นการกระทำที่ถูกต้องหรือไม่ หรือกำลังประมวลผลการกระทำของพวกเขาหรือไม่

การระบุการประมวลผลที่กำลังดำเนินต่อผู้ใช้ผ่านสัญญาณภาพต่างๆ พบว่าช่วยบรรเทาความรู้สึกไม่แน่นอนหรือความคับข้องใจใดๆ ที่พวกเขาอาจประสบได้ จึงช่วยป้องกันไม่ให้พวกเขาออกจากแอปพลิเคชันก่อนเวลาอันควร

ผลกระทบของการโหลด UIs ต่อประสิทธิภาพและประสบการณ์ผู้ใช้

การวิเคราะห์พฤติกรรมทั้ง 10 ประการของ Jakob Nielsen สำหรับการออกแบบส่วนต่อประสานกับผู้ใช้ เน้นย้ำถึงความสำคัญของการช่วยให้ผู้ใช้ปลายทางรับรู้สถานะปัจจุบันของระบบ หลักการนี้ชี้ให้เห็นว่าส่วนประกอบอินเทอร์เฟซผู้ใช้ รวมถึงอินเทอร์เฟซการโหลดและองค์ประกอบข้อเสนอแนะต่างๆ ควรให้การแจ้งเตือนทันเวลาเกี่ยวกับความคืบหน้าของการดำเนินงานและปฏิบัติตามกรอบเวลาที่กำหนด

การใช้งานหน้าจอการโหลดที่มีประสิทธิภาพถือเป็นสิ่งสำคัญสำหรับการเพิ่มประสิทธิภาพและประสบการณ์ผู้ใช้ของแอปพลิเคชัน ในแง่ของประสิทธิภาพ หน้าจอเหล่านี้สามารถปรับปรุงความเร็วและการตอบสนองของเว็บแอปพลิเคชันได้อย่างมาก

การใช้ประโยชน์จากอินเทอร์เฟซผู้ใช้อย่างเหมาะสมที่สุดจะอำนวยความสะดวกในการโหลดเนื้อหาแบบอะซิงโครนัส ซึ่งจะทำให้หน้าเว็บทั้งหมดไม่ค้างในระหว่างกระบวนการโหลดองค์ประกอบเฉพาะพร้อมกันในเบื้องหลัง ด้วยเหตุนี้ จึงส่งผลให้ประสบการณ์การท่องเว็บได้รับการปรับปรุงด้วยการนำทางที่ราบรื่น

นอกจากนี้ การแสดงการดำเนินงานปัจจุบันด้วยภาพที่ชัดเจนสามารถกระตุ้นให้ผู้ใช้แสดงความอดทนมากขึ้นในขณะที่รอการรับข้อมูล

เริ่มต้นใช้งาน React Suspense ใน Next.js 13

Suspense เป็นส่วนประกอบ React ที่จัดการการดำเนินการแบบอะซิงโครนัสที่ทำงานอยู่เบื้องหลัง เช่น การดึงข้อมูล พูดง่ายๆ ก็คือ คอมโพเนนต์นี้ช่วยให้คุณสามารถเรนเดอร์คอมโพเนนต์ทางเลือกได้จนกว่าคอมโพเนนต์ย่อยที่ต้องการจะเมาต์และโหลดข้อมูลที่ต้องการ

พิจารณาสถานการณ์ที่โมดูลดึงข้อมูลจากบริการเว็บ ดังที่แสดงในภาพประกอบที่ตามมา ในกรณีนี้ เราจะพิจารณากรอบการทำงานสมมุติที่องค์ประกอบอินเทอร์เฟซผู้ใช้จัดหาข้อมูลจาก Application Programming Interface (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> }

การใช้งานการระงับใน React ช่วยให้สามารถดึงข้อมูลแบบอะซิงโครนัสในขณะที่ยังคงรักษาประสบการณ์ผู้ใช้ที่ราบรื่นโดยการแสดงส่วนประกอบตัวยึด เช่น องค์ประกอบ"กำลังโหลด"แทนที่จะปล่อยให้หน้าว่างหรือค้างในระหว่างกระบวนการดึงข้อมูล ด้วยการใช้ข้อมูลโค้ดที่ให้มา ซึ่งมีส่วนประกอบ “Todos” ที่ส่งคืนอาร์เรย์ของงาน สถานะการโหลดจะได้รับการจัดการอย่างมีประสิทธิภาพผ่านการใช้ Suspense API ทำให้มั่นใจได้ว่าแอปพลิเคชันยังคงตอบสนองและโต้ตอบได้แม้ในขณะรอข้อมูลที่จะโหลด.

 import { Suspense } from 'react';

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

Next.js 13 รองรับการตอบสนองอย่างใจจดใจจ่อ

Next.js เวอร์ชัน 13 ได้นำเสนอแนวทางใหม่ในการยกระดับประสบการณ์ผู้ใช้ด้วยการผสานรวมฟังก์ชัน Suspense ผ่านทางฟีเจอร์ App Directory ที่ก้าวล้ำ คุณสมบัตินี้ช่วยให้นักพัฒนาสามารถจัดการและจัดเรียงส่วนประกอบของเพจอย่างมีกลยุทธ์สำหรับแต่ละเส้นทางในโฟลเดอร์ที่กำหนด การใช้เทคนิคนี้จะทำให้สามารถปรับปรุงการจัดระเบียบโครงการในขณะเดียวกันก็เพิ่มประสิทธิภาพระดับประสิทธิภาพไปพร้อมๆ กัน

ในไดเร็กทอรีเส้นทางที่ระบุ เป็นไปได้ที่จะรวมไฟล์"loading.js"ที่ Next.js จะใช้เป็นส่วนประกอบเริ่มต้นสำหรับการแสดงอินเทอร์เฟซผู้ใช้ที่กำลังโหลดก่อนที่จะแสดงผลส่วนประกอบลูกพร้อมกับข้อมูล

การรวม React Suspense ภายในเฟรมเวิร์กของ Next.js เวอร์ชัน 13 เป็นแนวทางที่มีประสิทธิภาพในการสร้างการสาธิตแอปพลิเคชัน To-Do ที่ครอบคลุม

ซอร์สโค้ดสำหรับโปรเจ็กต์นี้มีอยู่ในที่เก็บ 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 โดยใช้การดำเนินการที่ไม่มีการบล็อก ต่อจากนั้น จะวนซ้ำชุดงานที่ได้มานี้และแสดงผลในรูปแบบที่แสดงเป็นภาพบนอินเทอร์เฟซผู้ใช้ของเว็บเบราว์เซอร์

นอกจากนี้ โปรแกรมยังรวมกลไกอะซิงโครนัสที่เรียกว่าฟังก์ชัน"รอ"ซึ่งทำหน้าที่จำลองช่วงเวลาแฝง การออกแบบนี้ช่วยให้ผู้ใช้รับรู้ถึงอินเทอร์เฟซผู้ใช้ที่กำลังโหลดในช่วงเวลาที่กำหนดไว้ล่วงหน้า ก่อนที่จะแสดงงานที่ดึงมาหรือออบเจ็กต์ Todo

ในสถานการณ์จริง แทนที่จะเลียนแบบเวลาแฝงผ่านการจำลอง เหตุการณ์จริง เช่น การดำเนินการในโปรแกรมซอฟต์แวร์ การดึงข้อมูลจากฐานข้อมูล การใช้บริการภายนอกที่มีเวลาตอบสนองช้าลง และการตอบสนองของ API ที่ล่าช้า ล้วนมีส่วนทำให้เกิดความล่าช้าชั่วคราวได้

รวม React Suspense ในแอปพลิเคชัน Next.js

โปรดแก้ไขเนื้อหาของไฟล์ app/layout.js โดยรวมข้อมูลโค้ดที่ให้มา

 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 ทำหน้าที่เป็นองค์ประกอบโครงร่างหลักที่สร้างการจัดเรียงและฟังก์ชันทั่วไปของการออกแบบแพลตฟอร์ม ด้วยการจัดเตรียมคุณสมบัติ children ให้กับคอมโพเนนต์ Suspense จะทำให้เลย์เอาต์ทำหน้าที่เป็นตัวห่อหุ้มสำหรับเนื้อหาทั้งหมดที่มีอยู่ในแอปพลิเคชัน

คอมโพเนนต์ Suspense ทำหน้าที่เป็นตัวยึดตำแหน่งในระหว่างการเรนเดอร์คอมโพเนนต์ย่อยแบบอะซิงโครนัส โดยนำเสนอองค์ประกอบการโหลดเป็นสัญญาณภาพเพื่อแจ้งให้ผู้ใช้ทราบว่าขณะนี้เนื้อหากำลังถูกดึงข้อมูลหรือประมวลผลในเบื้องหลัง

อัปเดตไฟล์เส้นทางกลับบ้าน

โปรดเปิดไฟล์ “app/page.js” ลบโค้ดเริ่มต้นที่มีอยู่แล้วออกจาก Next.js และใส่บรรทัดโค้ดต่อไปนี้:

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

การเพิ่ม Modern Spinners ให้กับ Loading UI Component

การโหลดส่วนประกอบ UI ที่คุณสร้างขึ้นนั้นเป็นพื้นฐานมาก คุณสามารถเลือกเพิ่มหน้าจอโครงกระดูกได้ หรือคุณสามารถสร้างและจัดสไตล์องค์ประกอบการโหลดแบบกำหนดเองโดยใช้ Tailwind CSS ในแอปพลิเคชัน Next.js จากนั้นเพิ่มแอนิเมชั่นการโหลดที่ใช้งานง่าย เช่น สปินเนอร์ที่มาจากแพ็คเกจ เช่น React Spinners

หากต้องการใช้แพ็คเกจนี้ ให้ดำเนินการติดตั้งภายในโปรเจ็กต์ของคุณ

 npm install react-loader-spinner --save 

ถัดไป อัพเดต yourloading.jsfile ดังนี้:

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

อินเทอร์เฟซผู้ใช้สำหรับการโหลดสถานะของแอปพลิเคชันจะแสดงคิวภาพในรูปแบบของข้อความการโหลดพร้อมกับเอฟเฟกต์การหมุนแบบเคลื่อนไหว ซึ่งทำหน้าที่เป็นข้อบ่งชี้ว่ากระบวนการดึงข้อมูล Todo กำลังดำเนินการอยู่

ปรับปรุงประสบการณ์ผู้ใช้ด้วยการโหลด UI

การรวมอินเทอร์เฟซการโหลดภายในเว็บแอปพลิเคชันสามารถปรับปรุงประสบการณ์ผู้ใช้โดยรวมได้อย่างชัดเจนโดยการนำเสนอตัวบ่งชี้แบบภาพที่แจ้งให้ผู้ใช้ทราบถึงกระบวนการอะซิงโครนัสที่กำลังดำเนินอยู่ แนวทางนี้ไม่เพียงแต่ลดความเข้าใจและความคลุมเครือเท่านั้น แต่ยังส่งเสริมการมีส่วนร่วมของผู้ใช้ที่เพิ่มขึ้นอีกด้วย