Angular Academy · บทเรียน

การเปิดใช้ Full Hydration

เปิดใช้ hydration เพื่อหลีกเลี่ยงการเรนเดอร์ใหม่

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

เปิดใช้การไฮเดรต

เปิดใช้การไฮเดรตแบบเต็มรูปแบบโดยเพิ่ม provideClientHydration() ลงในผู้ให้บริการของแอป สคีมาติก ng add @angular/ssr จะเพิ่มรายการนี้ให้โดยอัตโนมัติ

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

export const appConfig = {
  providers: [provideClientHydration()]
};

ตำแหน่งที่ต้องเพิ่ม

รายการนี้ต้องอยู่ในผู้ให้บริการ appConfig ของเบราว์เซอร์ ซึ่งเป็นการกำหนดค่าเดียวกับที่ใช้เริ่มต้นไคลเอ็นต์ ส่วนการกำหนดค่าของเซิร์ฟเวอร์จะผสานทับด้วย provideServerRendering()

ความหมายของแบบเต็มรูปแบบ

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

เล่นเหตุการณ์ซ้ำ

เปิดใช้ withEventReplay() เพื่อบันทึกการโต้ตอบของผู้ใช้ที่เกิดขึ้นก่อนการไฮเดรตเสร็จ แล้วเล่นซ้ำภายหลัง ช่วยป้องกันการคลิกสูญหายบนอุปกรณ์ที่ทำงานช้า

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

providers: [provideClientHydration(withEventReplay())]

แคชถ่ายโอน HTTP

เมื่อเปิดใช้การไฮเดรต การตอบกลับแบบ GET ของ HttpClient จากเซิร์ฟเวอร์จะถูกแคชลงใน TransferState โดยค่าเริ่มต้น ดังนั้นไคลเอ็นต์จึงไม่ต้องร้องขอข้อมูลเดิมซ้ำหลังเริ่มทำงาน

provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))

ตรวจสอบการไฮเดรต

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

// Angular hydrated 24 component(s) and 187 node(s)

แก้ไขความไม่ตรงกัน

หากพบข้อผิดพลาดความไม่ตรงกัน NG0500 ให้ค้นหาเทมเพลตที่ให้ผลไม่แน่นอนหรือการแก้ไข DOM ด้วยตนเอง ทำให้มาร์กอัปให้ผลแน่นอน เพื่อให้ผลลัพธ์จากเซิร์ฟเวอร์และไคลเอ็นต์ตรงกัน

ป้องกันการใช้ API ของเบราว์เซอร์

โค้ดที่เข้าถึง window หรือ localStorage ระหว่างการเรนเดอร์ครั้งแรกอาจทำให้มาร์กอัประหว่างเซิร์ฟเวอร์กับไคลเอ็นต์แตกต่างกัน ให้ป้องกันด้วย isPlatformBrowser หรือเรียกใช้หลังจากเริ่มต้นมุมมองแล้ว

if (isPlatformBrowser(this.platformId)) {
  this.width = window.innerWidth;
}

ข้อแลกเปลี่ยนของการไฮเดรตแบบเต็มรูปแบบ

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

i18n และการไฮเดรต

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

ตรวจสอบก่อนใช้งานจริง

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

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

ตรวจสอบความรู้เรื่องการไฮเดรตแบบเต็มรูปแบบของคุณ

สรุป

คุณเปิดใช้การไฮเดรตแบบเต็มรูปแบบด้วย provideClientHydration() เพิ่ม withEventReplay() สำหรับการคลิกก่อนการไฮเดรต ใช้แคชถ่ายโอน HTTP ป้องกันการใช้ API ของเบราว์เซอร์ และตรวจสอบว่าการไฮเดรตทำงานอย่างเรียบร้อย การไฮเดรตแบบเต็มรูปแบบทำได้ง่าย แต่จะโหลด JS ทั้งหมดตั้งแต่ต้น

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

บทเรียน “การเปิดใช้ Full Hydration” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเปิดใช้ Full Hydration”

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

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

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

บทเรียน “การเปิดใช้ Full Hydration” ใช้เวลานานแค่ไหน

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

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

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

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

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