SSR แบบสตรีมจากขอบเครือข่าย

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

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

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

ฟังก์ชันเรียกกลับ onShellReady จะทำงานเมื่อเชลล์ HTML ที่ไม่มีการรอจาก Suspense ซึ่งก็คือทุกอย่างนอกขอบเขต Suspense พร้อมสำหรับการสตรีม นี่คือจังหวะที่เหมาะสมในการกำหนดรหัสสถานะ HTTP และส่วนหัวการตอบกลับ จากนั้นจึงเรียก pipe(res) หรือเริ่มอ่านจาก ReadableStream

ต้องส่งรหัสสถานะ HTTP และส่วนหัวก่อนที่เนื้อหาการตอบกลับจะเริ่มต้น เนื่องจากการสตรีมเริ่มต้นที่ onShellReady ตรรกะจัดการข้อผิดพลาดใด ๆ เช่น การกำหนดสถานะ 500 หรือการเปลี่ยนเส้นทาง ต้องทำก่อนที่เชลล์จะเริ่มส่งข้อมูล เมื่อเริ่มสตรีมแล้ว รหัสสถานะจะถูกล็อก

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

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

หากข้อมูลของขอบเขต Suspense ใช้เวลานานเกินไป ให้สตรีมเชลล์ต่อไป แล้วให้ขอบเขตนั้นทำไฮเดรตบนไคลเอนต์ ใช้การหมดเวลา: หลังผ่านไป 5 วินาที ให้เรียกใช้ abort() บนสตรีมหากขอบเขตยังทำงานไม่เสร็จ แล้วไคลเอนต์จะดึงข้อมูลเองผ่าน useEffect

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

renderToReadableStream ส่งคืนฟังก์ชันควบคุมการยกเลิก หากคำขอถูกยกเลิก (ผู้ใช้นำทางออกจากหน้า) การเรียกใช้ abort() จะหยุดไม่ให้ React เรนเดอร์และประมวลผลข้อมูลต่อ วิธีนี้ช่วยป้องกันการคำนวณที่สูญเปล่าจากคำขอที่ไม่มีผู้ใช้งานแล้ว และควบคุมการใช้ CPU ของ Worker ให้อยู่ในขอบเขต

เมื่อใช้การสตรีมจากขอบเครือข่าย ลำดับเวลาแฝงทั้งหมดจะเป็นดังนี้: 5ms (จากคำขอไปยัง PoP ที่ใกล้ที่สุด) + 2ms (การเริ่มต้น Worker แบบเย็น) + 8ms (การเรนเดอร์เชลล์) = 15ms จนถึงไบต์แรก เบราว์เซอร์ของผู้ใช้จะแสดงผลองค์ประกอบ LCP จากเชลล์ ขณะที่ส่วนที่เหลือของหน้าสตรีมเข้ามาอย่างต่อเนื่องในเบื้องหลัง

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