การไฮเดรตแบบก้าวหน้า
ไฮเดรตเฉพาะส่วนของหน้าที่ต้องมีการโต้ตอบ เพื่อให้ได้ TTI ที่เร็วขึ้น
การไฮเดรตแบบก้าวหน้า เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
การทำ Hydration คืออะไร
Hydration คือกระบวนการเชื่อมพฤติกรรมจาก JS เข้ากับ HTML ที่เซิร์ฟเวอร์แสดงผลไว้ในเบราว์เซอร์
เหตุผลที่ทำแบบค่อยเป็นค่อยไป
การทำ Hydration เต็มรูปแบบสำหรับหน้าขนาดใหญ่ใช้ CPU มาก การทำ Hydration แบบค่อยเป็นค่อยไปจะจัดลำดับความสำคัญให้การโต้ตอบที่สำคัญทำงานก่อน
ค่าเริ่มต้นของ SvelteKit
SvelteKit ทำ Hydration แยกตามหน้า ไม่ใช่แยกตามคอมโพเนนต์ โดยจะทำ Hydration ให้แต่ละเส้นทางอย่างอิสระเมื่อจำเป็น
สถาปัตยกรรมแบบเกาะ
ผสานการสร้างล่วงหน้าแบบคงที่เข้ากับการทำ Hydration เฉพาะคอมโพเนนต์ที่โต้ตอบได้เท่านั้น
คอมโพเนนต์แบบโหลดเมื่อจำเป็น
ใช้ import() แบบไดนามิกกับคอมโพเนนต์ที่ไม่สำคัญ เพื่อเลื่อนการโหลดออกไป
const Comments = await import("./Comments.svelte");ตัวสังเกตจุดตัด
ทำ Hydration ให้เครื่องมือที่อยู่ถัดลงไปนอกจอเมื่อผู้ใช้เลื่อนจนมองเห็น
ใช้แอ็กชัน
ห่อการโหลดเมื่อจำเป็นไว้ในแอ็กชันของ Svelte เพื่อให้นำกลับมาใช้ใหม่ได้
ผลลัพธ์ด้านประสิทธิภาพ
ลด TTI ลดขนาดข้อมูล JS เริ่มต้น และทำให้การโต้ตอบครั้งแรกเร็วขึ้น
ข้อแลกเปลี่ยน
การทำ Hydration ที่เลื่อนออกไปอาจทำให้ส่วนที่เลื่อนออกไปโต้ตอบได้ช้าลง โปรดวางแผนอย่างรอบคอบ
SSR + Hydration
SSR มอบการแสดงผลครั้งแรก ส่วน Hydration จะเพิ่มพฤติกรรมจาก JS เข้าไป
เปรียบเทียบเฟรมเวิร์ก
Astro และ Qwik ทำให้แนวทางแบบเกาะและแบบกลับมาทำงานต่อได้รับความนิยม ส่วน SvelteKit มีเครื่องมือคล้ายกันให้ใช้ด้วยตนเอง
ตรวจสอบความเข้าใจ
การทำ Hydration แบบค่อยเป็นค่อยไปคืออะไร
ทบทวน
เลื่อนการทำ Hydration ของคอมโพเนนต์ที่ไม่สำคัญออกไป โดยใช้การนำเข้าแบบไดนามิกและตัวสังเกตจุดตัดเพื่อให้ TTI เร็วขึ้น
คำถามที่พบบ่อย
บทเรียน “การไฮเดรตแบบก้าวหน้า” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การไฮเดรตแบบก้าวหน้า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การไฮเดรตแบบก้าวหน้า”
ไฮเดรตเฉพาะส่วนของหน้าที่ต้องมีการโต้ตอบ เพื่อให้ได้ TTI ที่เร็วขึ้น คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การไฮเดรตแบบก้าวหน้า” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สตรีมข้อมูลด้วย Promise ใน load
- การโหลดแบบเลื่อนเวลาและประสบการณ์ใช้งานคล้าย Suspense
- สตรีมจากเซิร์ฟเวอร์ด้วย +server.js
- การไฮเดรตแบบก้าวหน้า