การโหลดขี้เกียจทำอย่างไรกับแอปพลิเคชันไฮเดรชั่นอย่างไร

ความชุ่มชื้นทำงานอย่างไรและส่งผลกระทบต่อการโหลดขี้เกียจ

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

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

เหตุใดการก่อวินาศกรรมความชุ่มชื้นขี้เกียจกำลังโหลด

- การดำเนินการที่กระตือรือร้น: การให้ความชุ่มชื้นต้องใช้การดำเนินการส่วนประกอบทั้งหมดในต้นไม้เรนเดอร์ซึ่งป้องกันการโหลดขี้เกียจจากการเลื่อนการโหลดรหัสสำหรับส่วนประกอบเหล่านี้
- การพึ่งพาส่วนประกอบ: ส่วนประกอบของเด็กขึ้นอยู่กับอุปกรณ์ประกอบฉากจากส่วนประกอบหลักดังนั้นผู้ปกครองจะต้องได้รับความชุ่มชื้นก่อนบังคับให้ห่วงโซ่การโหลดกระตือรือร้น
- ตัวจัดการเหตุการณ์และสถานะ: ความชุ่มชื้นต้องตั้งค่าผู้ฟังเหตุการณ์และคืนสถานะซึ่งต้องใช้รหัสส่วนประกอบที่ใช้งานได้ล่วงหน้า
- ภาระของนักพัฒนา: เพื่อให้เกิดการโหลดขี้เกียจในระหว่างการชุ่มชื้นนักพัฒนาจะต้องจัดการการดึงข้อมูลล่วงหน้าและการแยกรหัสด้วยตนเองซึ่งอาจซับซ้อนและผิดพลาดได้ง่าย [6] [7]

เมื่อขี้เกียจโหลดทำงานแม้จะมีความชุ่มชื้น

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

- กล่องโต้ตอบหรือโมดอลที่เปิดในการโต้ตอบของผู้ใช้
- ส่วนประกอบในเส้นทางต่าง ๆ ที่ไม่ได้แสดงผลในขั้นต้น

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

เทคนิคในการเพิ่มประสิทธิภาพความชุ่มชื้นและการโหลดขี้เกียจ

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

-ห้องสมุดเช่น `-lazy-hydration-on-scroll` ใน next.js อนุญาตให้ความชุ่มชื้นถูกเลื่อนออกไปจนกว่าส่วนประกอบจะเลื่อนเข้าไปในมุมมอง
- การใช้ Intersectionobserver API ส่วนประกอบสามารถโหลดได้อย่างขี้เกียจและให้ความชุ่มชื้นเฉพาะเมื่อเข้าสู่วิวพอร์ต
-ใน vue/nuxt เทคนิคการให้ความชุ่มชื้นขี้เกียจและปลั๊กอิน (เช่น `nuxt-lazy-hydrate`) เปิดใช้งานการให้ความชุ่มชื้นล่าช้าจนกระทั่งเธรดหลักไม่ได้ใช้งานหรือส่วนประกอบสามารถมองเห็นได้ปรับปรุงเวลาในการโต้ตอบและการหน่วงเวลาอินพุตครั้งแรก [4] [5]

สรุป

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

ในสาระสำคัญการก่อวินาศกรรมการโหลดขี้เกียจในระหว่างการโหลดหน้าเริ่มต้น แต่ด้วยตัวเลือกสถาปัตยกรรมอย่างระมัดระวังและเครื่องมือพิเศษนักพัฒนาสามารถปรับให้เหมาะสมเมื่อใดและอย่างไรที่ส่วนประกอบจะได้รับความชุ่มชื้นเพื่อให้ได้ประโยชน์จากการโหลดขี้เกียจ [1] [6] [7]

การอ้างอิง:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-are-incompatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-resource-optimization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linkedin.com/posts/misko-hepery-3883b1_lazy-loading-is-like-exermer-exercise-ereryone-says-activity-7115086933935984641-5oxkk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading