Suspense สำหรับขอบเขตแบบอะซิงโครนัส (แนวคิด)

เป้าหมาย: ใช้ Suspense ห่อส่วนของส่วนติดต่อผู้ใช้ที่โหลดแบบอะซิงโครนัส ระหว่างรอ ให้แสดงเนื้อหาสำรอง (ตัวหมุนแสดงการโหลดหรือโครงร่าง)

• ขอบเขต: พื้นที่ที่เล็กที่สุดที่คุณต้องการหน่วงการแสดงผล
• เนื้อหาสำรอง: สิ่งที่จะแสดงระหว่างโหลด
• ทำให้ส่วนที่เหลือของหน้าจอยังใช้งานได้

โหลดคอมโพเนนต์เมื่อจำเป็นด้วย React.lazy Suspense จะแสดงเนื้อหาสำรองขนาดเล็กขณะที่กำลัง "โหลด"

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

• ห่อเฉพาะส่วนที่กำลังโหลด
• เลือกเนื้อหาสำรองที่มีขนาดเล็กและเป็นประโยชน์ (ตัวหมุนแสดงการโหลดหรือโครงร่าง)
• ใช้ขอบเขตที่ซ้อนกันสำหรับพื้นที่ที่ไม่ขึ้นต่อกัน

หมายเหตุ:

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

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