Hydration คืออะไร
ทำความเข้าใจว่า hydration นำ HTML จากเซิร์ฟเวอร์กลับมาใช้ซ้ำอย่างไร
Hydration คืออะไร เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
นิยามการเติมความสามารถให้หน้าเว็บ
การเติมความสามารถให้หน้าเว็บ คือกระบวนการที่แอป Angular ฝั่งไคลเอ็นต์นำ HTML ที่แสดงผลจากเซิร์ฟเวอร์กลับมาใช้ โดยผูกตัวรับฟังเหตุการณ์และสถานะเข้ากับ DOM ที่มีอยู่ แทนการลบทิ้งแล้วแสดงผลใหม่
ชีวิตที่ไม่มีการเติมความสามารถให้หน้าเว็บ
SSR แบบเก่าใช้การเติมความสามารถแบบ ทำลายของเดิม: ไคลเอ็นต์จะลบ DOM จากเซิร์ฟเวอร์แล้วแสดงผลใหม่ตั้งแต่ต้น ทำให้เกิดการกะพริบที่มองเห็นได้และทำให้ผลงานของเซิร์ฟเวอร์สูญเปล่า
การเติมความสามารถแบบไม่ทำลายของเดิม
Angular รุ่นใหม่ใช้การเติมความสามารถแบบ ไม่ทำลายของเดิม: ระบบจะไล่ตรวจ DOM ที่มีอยู่ จับคู่กับโครงสร้างคอมโพเนนต์ และนำโหนดเดิมกลับมาใช้ จึงไม่เกิดการกะพริบ ใช้ทรัพยากรน้อยลง และมีประสิทธิภาพดีขึ้น
เหตุใดจึงช่วยปรับปรุงค่าสำคัญ
การนำ HTML จากเซิร์ฟเวอร์กลับมาใช้ทำให้เนื้อหาขนาดใหญ่ที่สุดยังคงแสดงอยู่ ช่วยเรื่อง LCP และหลีกเลี่ยงการเปลี่ยนตำแหน่งจากการแสดงผลใหม่ ช่วยเรื่อง CLS แอปจึงโต้ตอบได้โดยไม่ต้องวาดใหม่
ภาพรวมสองระยะ
ระยะที่หนึ่ง: เซิร์ฟเวอร์แสดงผล HTML และส่งไป ระยะที่สอง: เบราว์เซอร์ดาวน์โหลด JS เริ่มทำงาน Angular และเติมความสามารถให้มาร์กอัปเดิม เพื่อให้สามารถโต้ตอบได้
โครงสร้าง DOM ที่ตรงกัน
การเติมความสามารถให้หน้าเว็บสมมติว่าโครงสร้างคอมโพเนนต์บนไคลเอ็นต์สร้างโครงสร้างเดียวกับที่เซิร์ฟเวอร์สร้าง หากทั้งสองแตกต่างกัน Angular จะแจ้งว่าการเติมความสามารถไม่ตรงกัน
// NG0500: During hydration Angular expected <div> but found <span>สาเหตุทั่วไปของความไม่ตรงกัน
การแก้ไข DOM โดยตรง เงื่อนไขเฉพาะเบราว์เซอร์ที่ทำให้มาร์กอัปเปลี่ยน การซ้อน HTML ที่ไม่ถูกต้อง และเนื้อหาที่ไม่กำหนดแน่นอน (เช่น Math.random() หรือ Date.now() ในแม่แบบ) ล้วนทำให้เกิดความไม่ตรงกันได้
หลีกเลี่ยงการแก้ไข DOM ด้วยตนเอง
อย่าแก้ไข DOM แบบสั่งการโดยตรง (เช่น ใช้ innerHTML นอก Angular) ระหว่าง SSR ควรปล่อยให้ Angular เป็นผู้จัดการ DOM เพื่อให้ไคลเอ็นต์และเซิร์ฟเวอร์มีโครงสร้างตรงกัน
ทางหนีทีไล่ ngSkipHydration
สำหรับคอมโพเนนต์ที่ไม่สามารถเติมความสามารถให้หน้าเว็บได้จริง ๆ (เช่น วิดเจ็ตจากผู้ให้บริการภายนอกที่แก้ไข DOM) ให้ยกเว้นคอมโพเนนต์นั้นด้วย ngSkipHydration แล้ว Angular จะแสดงผลเฉพาะแผนผังย่อยนั้นใหม่
<app-legacy-widget ngSkipHydration></app-legacy-widget>การไฮเดรตต้องใช้ SSR
การไฮเดรตใช้ได้เฉพาะเมื่อมี HTML ที่เรนเดอร์จากเซิร์ฟเวอร์ให้นำกลับมาใช้ แอป CSR ล้วนไม่มีอะไรให้ไฮเดรต การไฮเดรตจึงเป็นส่วนฝั่งไคลเอ็นต์ของเรื่องราว SSR
ขั้นตอนถัดไป
การไฮเดรตทำได้ทั้งแบบเต็มรูปแบบ (ไฮเดรตทั้งแอปเมื่อโหลด) หรือแบบเพิ่มทีละส่วน (ไฮเดรตส่วนต่าง ๆ เมื่อจำเป็น) การเลือกกลยุทธ์ที่เหมาะสมเป็นกุญแจสำคัญต่อประสิทธิภาพ ซึ่งจะกล่าวถึงในบทเรียนถัดไป
ตรวจสอบความเข้าใจ
ตรวจสอบความเข้าใจเรื่องการไฮเดรตของคุณ
สรุป
การไฮเดรตนำ HTML จากเซิร์ฟเวอร์กลับมาใช้บนไคลเอ็นต์โดยไม่ทำลายเนื้อหาเดิม ช่วยปรับปรุง LCP และ CLS ความไม่ตรงกันอาจเกิดจากการแก้ไข DOM ด้วยตนเองหรือมาร์กอัปที่ให้ผลไม่แน่นอน ให้ใช้ ngSkipHydration เป็นทางเลือกสำหรับข้ามการไฮเดรต การไฮเดรตเป็นส่วนฝั่งไคลเอ็นต์ของ SSR
คำถามที่พบบ่อย
บทเรียน “Hydration คืออะไร” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Hydration คืออะไร” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Hydration คืออะไร”
ทำความเข้าใจว่า hydration นำ HTML จากเซิร์ฟเวอร์กลับมาใช้ซ้ำอย่างไร คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “Hydration คืออะไร” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ