React Suspense: คู่มือฉบับสมบูรณ์สำหรับการดึงข้อมูลและการแบ่งโค้ด

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

Suspense ใน React คืออะไร?

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

• การดึงข้อมูล: รอข้อมูลที่จะดึงมาจาก API
• การแบ่งโค้ด: รอโมดูล JavaScript ที่จะดาวน์โหลดและแยกวิเคราะห์

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

แนวคิดหลัก

• Suspense Component: คอมโพเนนต์ <Suspense> เอง มันยอมรับ prop fallback ซึ่งระบุ UI ที่จะแสดงในขณะที่คอมโพเนนต์ที่ถูกห่อหุ้มกำลังระงับ
• React.lazy(): ฟังก์ชันที่เปิดใช้งานการแบ่งโค้ดโดยการนำเข้าคอมโพเนนต์แบบไดนามิก มันจะคืนค่า Promise ที่จะสำเร็จเมื่อคอมโพเนนต์ถูกโหลด
• การผสานรวม Promise: Suspense ผสานรวมกับ Promises ได้อย่างราบรื่น เมื่อคอมโพเนนต์พยายามเรนเดอร์ข้อมูลจาก Promise ที่ยังไม่สำเร็จ การเรนเดอร์จะ "ระงับ" และแสดง UI สำรอง

กรณีการใช้งาน

1. การดึงข้อมูลด้วย Suspense

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

ตัวอย่าง: การดึงข้อมูลผู้ใช้จาก API

สมมติว่าคุณมีคอมโพเนนต์ที่แสดงข้อมูลผู้ใช้ที่ดึงมาจาก API หากไม่มี Suspense คุณอาจมีโค้ดประมาณนี้:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>กำลังโหลดข้อมูลผู้ใช้...</p>;
  }

  if (error) {
    return <p>ข้อผิดพลาด: {error.message}</p>;
  }

  if (!user) {
    return <p>ไม่มีข้อมูลผู้ใช้</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>อีเมล: {user.email}</p>
    </div>
  );
}

export default UserProfile;

โค้ดนี้ใช้งานได้ แต่เกี่ยวข้องกับการจัดการตัวแปรสถานะหลายตัว (isLoading, error, user) และตรรกะการเรนเดอร์แบบมีเงื่อนไข ด้วย Suspense คุณสามารถทำให้ง่ายขึ้นได้โดยใช้ไลบรารีการดึงข้อมูลเช่น SWR หรือ TanStack Query (ชื่อเดิม React Query) ซึ่งได้รับการออกแบบมาให้ทำงานร่วมกับ Suspense ได้อย่างราบรื่น

นี่คือวิธีที่คุณอาจใช้ SWR กับ Suspense:

import React from 'react';
import useSWR from 'swr';

// ฟังก์ชัน fetcher อย่างง่าย
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>ข้อผิดพลาด: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>อีเมล: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>กำลังโหลดข้อมูลผู้ใช้...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

ในตัวอย่างนี้:

• เราใช้ useSWR เพื่อดึงข้อมูลผู้ใช้ ตัวเลือก suspense: true บอกให้ SWR โยน Promise หากข้อมูลยังไม่พร้อมใช้งาน
• คอมโพเนนต์ UserProfile ไม่จำเป็นต้องจัดการสถานะการโหลดหรือข้อผิดพลาดโดยเฉพาะ เพียงแค่แสดงข้อมูลผู้ใช้เมื่อพร้อมใช้งาน
• คอมโพเนนต์ <Suspense> จะจับ Promise ที่โยนโดย SWR และแสดง UI สำรอง (<p>กำลังโหลดข้อมูลผู้ใช้...</p>) ในขณะที่ข้อมูลกำลังถูกดึง

แนวทางนี้ช่วยลดความซับซ้อนของตรรกะคอมโพเนนต์ของคุณและทำให้การดึงข้อมูลเข้าใจง่ายขึ้น

ข้อควรพิจารณาสำหรับการดึงข้อมูลสำหรับผู้ชมทั่วโลก:

เมื่อสร้างแอปพลิเคชันสำหรับผู้ชมทั่วโลก โปรดพิจารณาสิ่งต่อไปนี้:

• ความหน่วงของเครือข่าย: ผู้ใช้ในภูมิศาสตร์ที่แตกต่างกันอาจประสบกับความหน่วงของเครือข่ายที่แตกต่างกัน Suspense สามารถช่วยมอบประสบการณ์ผู้ใช้ที่ดีขึ้นได้โดยการแสดงตัวบ่งชี้การโหลดในขณะที่ข้อมูลกำลังถูกดึงจากเซิร์ฟเวอร์ที่อยู่ห่างไกล พิจารณาใช้ Content Delivery Network (CDN) เพื่อแคชข้อมูลของคุณให้ใกล้กับผู้ใช้ของคุณมากขึ้น
• การแปลข้อมูลตามภาษา: ตรวจสอบให้แน่ใจว่า API ของคุณรองรับการแปลข้อมูลตามภาษา ช่วยให้คุณสามารถแสดงข้อมูลในภาษาและรูปแบบที่ผู้ใช้ต้องการ
• ความพร้อมใช้งานของ API: ตรวจสอบความพร้อมใช้งานและประสิทธิภาพของ API ของคุณจากภูมิภาคต่างๆ เพื่อให้แน่ใจว่าประสบการณ์ผู้ใช้มีความสม่ำเสมอ

2. การแบ่งโค้ดด้วย React.lazy() และ Suspense

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

React มีฟังก์ชัน React.lazy() สำหรับการแบ่งโค้ดคอมโพเนนต์ เมื่อใช้ร่วมกับ Suspense จะช่วยให้คุณแสดง UI สำรองในขณะที่รอให้คอมโพเนนต์ถูกดาวน์โหลดและแยกวิเคราะห์

ตัวอย่าง: การโหลดคอมโพเนนต์แบบ lazy

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>กำลังโหลด...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

ในตัวอย่างนี้:

• เราใช้ React.lazy() เพื่อนำเข้า OtherComponent แบบไดนามิก สิ่งนี้จะคืนค่า Promise ที่จะสำเร็จเมื่อคอมโพเนนต์ถูกโหลด
• เราห่อหุ้ม <OtherComponent /> ด้วย <Suspense> และระบุ prop fallback
• ในขณะที่ OtherComponent กำลังถูกโหลด UI สำรอง (<p>กำลังโหลด...</p>) จะถูกแสดง เมื่อคอมโพเนนต์โหลดเสร็จแล้ว จะแทนที่ UI สำรอง

ประโยชน์ของการแบ่งโค้ด:

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

เทคนิคการแบ่งโค้ดขั้นสูง:

• การแบ่งโค้ดตามเส้นทาง (Route-Based Code Splitting): แบ่งแอปพลิเคชันของคุณตามเส้นทาง เพื่อให้แต่ละเส้นทางโหลดเฉพาะโค้ดที่จำเป็นเท่านั้น สิ่งนี้สามารถทำได้ง่ายๆ ด้วยไลบรารีเช่น React Router
• การแบ่งโค้ดตามคอมโพเนนต์ (Component-Based Code Splitting): แบ่งคอมโพเนนต์แต่ละตัวออกเป็นส่วนย่อยๆ โดยเฉพาะสำหรับคอมโพเนนต์ขนาดใหญ่หรือที่ใช้งานไม่บ่อย
• การนำเข้าแบบไดนามิก (Dynamic Imports): ใช้การนำเข้าแบบไดนามิกภายในคอมโพเนนต์ของคุณเพื่อโหลดโค้ดตามความต้องการตามการโต้ตอบของผู้ใช้หรือเงื่อนไขอื่นๆ

3. Concurrent Mode และ Suspense

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

ด้วย Concurrent Mode และ Suspense React สามารถ:

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

ในการเปิดใช้งาน Concurrent Mode คุณสามารถใช้ API createRoot ใน React 18:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // สร้าง root
root.render(<App />);

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้งาน Suspense

• ใช้ไลบรารีการดึงข้อมูล: พิจารณาใช้ไลบรารีการดึงข้อมูลเช่น SWR หรือ TanStack Query ซึ่งออกแบบมาให้ทำงานร่วมกับ Suspense ได้อย่างราบรื่น ไลบรารีเหล่านี้มีฟีเจอร์เช่นแคช การลองใหม่โดยอัตโนมัติ และการจัดการข้อผิดพลาด ซึ่งสามารถลดความซับซ้อนของตรรกะการดึงข้อมูลของคุณได้
• จัดเตรียม UI สำรองที่มีความหมาย: UI สำรองควรแสดงข้อบ่งชี้ที่ชัดเจนว่ากำลังมีการโหลดบางอย่าง ใช้สปินเนอร์ แถบความคืบหน้า หรือ skeleton loaders เพื่อสร้างประสบการณ์การโหลดที่น่าสนใจและให้ข้อมูล
• จัดการข้อผิดพลาดอย่างสง่างาม: ใช้ Error Boundaries เพื่อจับข้อผิดพลาดที่เกิดขึ้นระหว่างการเรนเดอร์ สิ่งนี้สามารถป้องกันไม่ให้แอปพลิเคชันทั้งหมดของคุณล่ม และมอบประสบการณ์ผู้ใช้ที่ดีขึ้น
• ปรับปรุงการแบ่งโค้ด: ใช้การแบ่งโค้ดอย่างมีกลยุทธ์เพื่อลดเวลาโหลดเริ่มต้นของแอปพลิเคชันของคุณ ระบุคอมโพเนนต์ขนาดใหญ่หรือคอมโพเนนต์ที่ใช้งานไม่บ่อยและแบ่งออกเป็นส่วนย่อยๆ
• ทดสอบการใช้งาน Suspense ของคุณ: ทดสอบการใช้งาน Suspense ของคุณอย่างละเอียดเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้องและแอปพลิเคชันของคุณจัดการสถานะการโหลดและข้อผิดพลาดได้อย่างสง่างาม

การจัดการข้อผิดพลาดด้วย Error Boundaries

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

นี่คือตัวอย่างพื้นฐานของ Error Boundary:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // อัปเดต state เพื่อให้การเรนเดอร์ครั้งต่อไปแสดง UI สำรอง
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // คุณสามารถบันทึกข้อผิดพลาดไปยังบริการรายงานข้อผิดพลาดได้
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // คุณสามารถเรนเดอร์ UI สำรองแบบกำหนดเองได้
      return <h1>มีบางอย่างผิดพลาด</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

ในการใช้งาน Error Boundary ให้ห่อหุ้มคอมโพเนนต์ที่อาจเกิดข้อผิดพลาด:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

ด้วยการรวม Suspense และ Error Boundaries คุณสามารถสร้างแอปพลิเคชันที่แข็งแกร่งและยืดหยุ่น ซึ่งจัดการทั้งสถานะการโหลดและข้อผิดพลาดได้อย่างสง่างาม

ตัวอย่างในโลกแห่งความเป็นจริง

นี่คือตัวอย่างการใช้งาน Suspense เพื่อปรับปรุงประสบการณ์ผู้ใช้:

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

ตัวอย่าง: แพลตฟอร์ม E-commerce นานาชาติ

พิจารณาแพลตฟอร์ม E-commerce นานาชาติที่ขายสินค้าทั่วโลก แพลตฟอร์มสามารถใช้ประโยชน์จาก Suspense และ React.lazy() เพื่อ:

• โหลดรูปภาพสินค้าแบบ Lazy: ใช้ React.lazy() เพื่อโหลดรูปภาพสินค้าเมื่อมองเห็นใน viewport เท่านั้น สิ่งนี้สามารถลดเวลาโหลดเริ่มต้นของหน้าแสดงรายการสินค้าได้อย่างมาก ห่อหุ้มแต่ละรูปภาพที่โหลดแบบ lazy ด้วย <Suspense fallback={<img src="placeholder.png" alt="กำลังโหลด..." />}> เพื่อแสดงรูปภาพตัวอย่างขณะที่รูปภาพจริงกำลังโหลด
• แบ่งโค้ดคอมโพเนนต์เฉพาะประเทศ: หากแพลตฟอร์มมีคอมโพเนนต์เฉพาะประเทศ (เช่น การจัดรูปแบบสกุลเงิน ช่องป้อนที่อยู่) ให้ใช้ React.lazy() เพื่อโหลดคอมโพเนนต์เหล่านี้เมื่อผู้ใช้เลือกประเทศที่เฉพาะเจาะจงเท่านั้น
• ดึงคำอธิบายสินค้าที่แปลตามภาษา: ใช้ไลบรารีการดึงข้อมูลเช่น SWR ร่วมกับ Suspense เพื่อดึงคำอธิบายสินค้าในภาษาที่ผู้ใช้ต้องการ แสดงตัวบ่งชี้การโหลดขณะที่คำอธิบายสินค้าที่แปลตามภาษา กำลังถูกดึง

บทสรุป

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

ด้วยการผสานรวม Suspense เข้ากับไลบรารีการดึงข้อมูลและเทคนิคการแบ่งโค้ด คุณสามารถปลดล็อกศักยภาพเต็มที่ของ Concurrent Mode ของ React และสร้างแอปพลิเคชันเว็บที่ทันสมัยและน่าดึงดูดได้อย่างแท้จริง โอบรับ Suspense และยกระดับการพัฒนา React ของคุณไปอีกขั้น

เรียนรู้เพิ่มเติม

• เอกสารประกอบ React Suspense
• เอกสารประกอบ SWR
• เอกสารประกอบ TanStack Query
• ประกาศ React 18 (Concurrent Mode)