ขอบเขต Suspense และลำดับความสำคัญของการสตรีม

ขอบเขต Suspense คือหน่วยพื้นฐานที่กำหนดความละเอียดของการส่งข้อมูล แต่ละขอบเขต Suspense ในแผนผังคอมโพเนนต์จะสร้างส่วนที่สามารถส่งข้อมูลแยกกันได้ — React สามารถแก้ไขและส่งข้อมูลของแต่ละขอบเขตตามจังหวะของตนเอง โดยไม่ขึ้นต่อขอบเขตอื่น

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

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

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

React ใช้รูปแบบองค์ประกอบ template ของ HTML: เนื้อหา Suspense ที่แก้ไขเสร็จจะถูกส่งเข้าไปใน template ที่ซ่อนไว้ จากนั้นสคริปต์จะเรียกฟังก์ชันภายในของ React เพื่อย้ายเนื้อหาจาก template ไปยังตำแหน่งที่ถูกต้องใน DOM รูปแบบนี้ทำให้สามารถจัดการ DOM ได้โดยไม่ต้องใช้เฟรมเวิร์ก JS

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

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

React จะส่งขอบเขต Suspense ตามลำดับที่แก้ไขเสร็จ — ไม่จำเป็นต้องตรงกับลำดับที่ปรากฏในเอกสาร ส่วนที่อยู่นอกพื้นที่มองเห็นเริ่มต้นอาจแก้ไขเสร็จก่อนส่วนที่อยู่ในพื้นที่มองเห็น หากต้องใช้ข้อมูลน้อยกว่า React จะจัดการแทรกลงใน DOM ได้อย่างถูกต้องไม่ว่าลำดับการส่งข้อมูลจะเป็นอย่างไร

การทำไฮเดรชันแบบเลือกของ React 18 ตอบสนองต่อการโต้ตอบของผู้ใช้: หากผู้ใช้คลิกหรือวางเมาส์เหนือขอบเขต Suspense ที่ยังไม่ได้ทำไฮเดรชัน React จะจัดลำดับความสำคัญให้ทำไฮเดรชันขอบเขตนั้นก่อน วิธีนี้ทำให้การโต้ตอบของผู้ใช้ตอบสนองได้ดี แม้ว่าส่วนอื่นของหน้าจะยังอยู่ระหว่างการทำไฮเดรชัน

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

ในแท็บเครือข่ายของ Chrome DevTools ให้ใช้ตัวเลือก "เก็บบันทึกไว้" และสังเกตการส่งข้อมูลของการตอบกลับ: เอกสาร HTML จะขยายเพิ่มขึ้นเป็นชุด ๆ แท็บประสิทธิภาพจะแสดงเครื่องหมาย FCP และ LCP — ให้เปรียบเทียบรุ่นที่ใช้การส่งข้อมูลต่อเนื่องกับรุ่นที่ไม่ใช้ เพื่อวัดปริมาณการปรับปรุงให้ชัดเจนยิ่งขึ้น ลองจำลองเครือข่าย 3G ความเร็วสูงเพื่อขยายให้เห็นผลกระทบได้ชัดเจนขึ้น

ส่วนสำรองของขอบเขต Suspense จะเป็นอย่างไรในการตอบกลับ HTML เริ่มต้นแบบส่งข้อมูลต่อเนื่อง

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