Angular Academy · บทเรียน

Incremental Hydration ด้วย @defer

ทำ hydration ให้บางส่วนของหน้าเว็บเมื่อจำเป็น

บทเรียน 3 จาก 413 ขั้นตอน

Incremental Hydration ด้วย @defer เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

ต้นทุนของการไฮเดรตแบบเต็มรูปแบบ

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

สร้างบน defer

การไฮเดรตแบบเพิ่มทีละส่วนใช้บล็อก @defer พร้อมทริกเกอร์ hydrate แบบพิเศษ เซิร์ฟเวอร์ยังคงเรนเดอร์เนื้อหา แต่ไคลเอ็นต์จะไฮเดรตเนื้อหานั้นเมื่อทริกเกอร์ทำงานเท่านั้น

@defer (hydrate on viewport) {
  <app-comments />
}

เปิดใช้การทำงาน

เลือกเปิดใช้ด้วย withIncrementalHydration() ในผู้ให้บริการการไฮเดรต การทำเช่นนี้จะเปิดใช้ทริกเกอร์ hydrate ในเทมเพลต

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

providers: [provideClientHydration(withIncrementalHydration())]

hydrate เมื่ออยู่ในวิวพอร์ต

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

@defer (hydrate on viewport) {
  <app-related-products />
}

hydrate เมื่อมีการโต้ตอบ

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

@defer (hydrate on interaction) {
  <app-share-menu />
}

hydrate เมื่อว่างและตามเวลา

ใช้ hydrate on idle เพื่อไฮเดรตเมื่อเบราว์เซอร์ว่าง หรือใช้ hydrate on timer(2s) เพื่อไฮเดรตหลังจากหน่วงเวลา เหมาะสำหรับส่วนที่ไม่สำคัญต่อการแสดงผล

@defer (hydrate on idle) {
  <app-newsletter />
}

hydrate ไม่ทำงาน

hydrate never จะคง HTML ที่เรนเดอร์จากเซิร์ฟเวอร์ไว้แบบคงที่ โดยจะแสดงผลแต่ไม่ส่ง JS สำหรับบล็อกนั้นเลย เหมาะสำหรับเนื้อหาที่มีไว้เพื่อแสดงผลล้วน ๆ และไม่มีการโต้ตอบ

@defer (hydrate never) {
  <app-footer-links />
}

ความแตกต่างจาก defer ทั่วไป

@defer ปกติในบริบท CSR จะแสดงตัวแทนรอจนกว่าจะโหลดเสร็จ แต่เมื่อใช้การไฮเดรตแบบเพิ่มทีละส่วน เนื้อหาจะถูกเรนเดอร์จากเซิร์ฟเวอร์และมองเห็นได้อยู่แล้ว ทริกเกอร์จะควบคุมเฉพาะเวลาที่เริ่มเปิดใช้การโต้ตอบ (การไฮเดรต)

รวมทริกเกอร์

คุณสามารถรวมทริกเกอร์หลายตัวได้ เพื่อให้บล็อกไฮเดรตเมื่อเหตุการณ์ใดเกิดขึ้นก่อน ช่วยสร้างสมดุลระหว่างความพร้อมใช้งานกับการประหยัดทรัพยากร

@defer (hydrate on viewport; hydrate on interaction) {
  <app-map />
}

JS เริ่มต้นมีขนาดเล็กลง

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

เลือกทริกเกอร์อย่างเหมาะสม

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

ตรวจสอบความเข้าใจ

ตรวจสอบความรู้เรื่องการไฮเดรตแบบเพิ่มทีละส่วนของคุณ

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

คุณใช้ @defer (hydrate ...) ร่วมกับ withIncrementalHydration() เพื่อไฮเดรตเมื่ออยู่ในวิวพอร์ต เมื่อมีการโต้ตอบ เมื่อเบราว์เซอร์ว่าง ตามเวลา หรือไม่ไฮเดรตเลย วิธีนี้ช่วยลด JS เริ่มต้นและปรับปรุงการโต้ตอบด้วยการเลื่อนการไฮเดรตของบล็อกที่อยู่นอกส่วนที่มองเห็นในตอนแรกและบล็อกที่ไม่ค่อยได้ใช้

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 38
บทเรียน: 144

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Incremental Hydration ด้วย @defer” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Incremental Hydration ด้วย @defer” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Incremental Hydration ด้วย @defer”

ทำ hydration ให้บางส่วนของหน้าเว็บเมื่อจำเป็น คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Incremental Hydration ด้วย @defer” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy