การสตรีมในรีแอ็กต์ 18: renderToPipeableStream ทำงานอย่างไร

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

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

renderToPipeableStream ส่งคืนออบเจ็กต์ที่มีสองเมธอด ได้แก่ pipe(writable) และ abort() pipe รับกระแสข้อมูล Writable ของ Node.js (โดยทั่วไปคือการตอบกลับ HTTP) แล้วเริ่มส่ง HTML ไปยังกระแสดังกล่าว ส่วน abort() จะยกเลิกกระแสข้อมูลเมื่อคำขอถูกยกเลิกหรือหมดเวลารอ

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

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

ส่ง bootstrapScripts: ['/static/js/client.js'] ให้กับ renderToPipeableStream เพื่อบอก React ให้แทรกแท็กสคริปต์ไว้ท้ายกระแสข้อมูล เบราว์เซอร์จะโหลดชุดรวมโค้ดนี้และเรียก hydrateRoot เพื่อเชื่อมตัวจัดการเหตุการณ์ของ React เข้ากับ DOM ที่เรนเดอร์จากเซิร์ฟเวอร์

onShellReady จะทำงานเมื่อโครง HTML พื้นฐาน (ทุกอย่างที่อยู่นอกขอบเขต Suspense ที่ยังรออยู่) พร้อมส่งแล้ว นี่คือจังหวะที่ถูกต้องในการเรียก pipe(res) แต่สิ่งสำคัญคือต้องกำหนดรหัสสถานะ HTTP และส่วนหัวการตอบกลับก่อนเรียก pipe เนื่องจากการสตรีมจะทำให้รหัสสถานะ HTTP ถูกกำหนดตายตัว

เนื่องจากการส่งข้อมูลจะเริ่มต้นทันทีเมื่อเรียกใช้ pipe() การกำหนดค่าใด ๆ ให้กับ res.setHeader หรือ res.statusCode ต้องเกิดขึ้นก่อนการเรียก pipe() รูปแบบที่พบบ่อยคือกำหนดสถานะเป็น 200 และ Content-Type: text/html ในฟังก์ชันเรียกกลับ onShellReady จากนั้นเรียก pipe(res) ทันที

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

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

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

คุณควรใช้ onAllReady แทน onShellReady เพื่อเริ่มส่งข้อมูลเมื่อใด

renderToPipeableStream คือกลไกพื้นฐานของ SSR แบบส่งข้อมูลต่อเนื่องสำหรับเซิร์ฟเวอร์ Node.js ใน React 18 โดยจะส่งโครงหน้าออกมาทันทีผ่าน onShellReady เติมเนื้อหาในขอบเขต Suspense เมื่อข้อมูลแก้ไขเสร็จ และทำไฮเดรชันฝั่งไคลเอนต์ผ่าน bootstrapScripts ใช้ onAllReady สำหรับบอตและโปรแกรมรวบรวมข้อมูล ใช้ onShellError เมื่อเกิดความล้มเหลวร้ายแรง และตั้งค่าส่วนหัว HTTP ก่อนเรียก pipe() เสมอ