ทำเว็บให้เปลี่ยนหน้าได้ลื่นขึ้นด้วย Next.js 16.4
คลิกแล้วต้องรอ ย้อนกลับมาก็โหลดใหม่? รู้จักแนวทางปรับการเปลี่ยนหน้าใน Next.js 16.4 ด้วย Partial Prefetching และการจัดการแคช เพื่อให้เนื้อหาสำคัญพร้อมใช้งานในจังหวะที่ผู้ใช้ต้องการ
การเปลี่ยนหน้าที่ลื่นไหลเกิดจากการเลือกเตรียมเนื้อหาที่จำเป็นล่วงหน้า ใช้ข้อมูลเดิมซ้ำอย่างเหมาะสม และกำหนดเวลาอัปเดตแคชให้ชัดเจน พร้อมทดสอบทั้งประสบการณ์ผู้ใช้และภาระของระบบ
ทำไมเปลี่ยนหน้าแล้วผู้ใช้ยังต้องรอ?
เว็บไซต์อาจเปิดหน้าแรกได้รวดเร็ว แต่เมื่อกดดูรายละเอียดสินค้าหรือเข้าสู่แดชบอร์ด ผู้ใช้กลับต้องรอข้อมูลจากเซิร์ฟเวอร์อีกครั้ง ความรู้สึกว่าเว็บไซต์เร็วจึงขึ้นอยู่กับการใช้งานระหว่างหน้าด้วย Next.js มี Prefetching สำหรับโหลดเส้นทางล่วงหน้า และ Client-side Navigation สำหรับเปลี่ยนหน้าโดยไม่โหลดเอกสารทั้งหน้าใหม่ ส่วน Streaming ช่วยทยอยส่งส่วนที่พร้อมแสดงผลมาก่อน ตัวอย่างเช่น หน้ารายละเอียดสินค้าสามารถแสดงโครงหน้าหรือส่วนที่พร้อมแล้ว ขณะที่ข้อมูลส่วนอื่นยังโหลดอยู่ การแบ่งส่วนด้วย loading.tsx หรือ Suspense จึงช่วยให้ผู้ใช้ได้รับการตอบสนองเร็วขึ้น โดยไม่จำเป็นต้องรอทุกส่วนพร้อมกัน
Partial Prefetching เตรียมสิ่งสำคัญก่อนคลิก
Partial Prefetching เป็นแนวทางที่เริ่มมีใน Next.js 16.3 และได้รับเครื่องมือควบคุมเพิ่มเติมในเวอร์ชัน 16.4 โดยเตรียมส่วนของเส้นทางที่นำกลับมาใช้ซ้ำได้ล่วงหน้า แล้วโหลดส่วนที่เหลือระหว่างการเปลี่ยนหน้า กรณีศึกษาของ v0 แสดงการปรับให้ข้อมูลสำคัญพร้อมก่อนเปิดหน้า และลดการเห็นหน้ารอโหลดเมื่อกลับมายังหน้าที่เคยเปิด อย่างไรก็ตาม การโหลดรายละเอียดล่วงหน้าทุกการ์ดในรายการขนาดใหญ่อาจสร้างคำขอที่ไม่จำเป็น ทีมจึงปรับบางส่วนให้เริ่มเตรียมข้อมูลเมื่อผู้ใช้ชี้เมาส์ โฟกัส หรือแตะการ์ด แนวทางนี้ช่วยให้การโหลดสัมพันธ์กับความตั้งใจของผู้ใช้มากขึ้น
วางอายุแคชให้เหมาะกับข้อมูล
การเก็บข้อมูลไว้ในแคชช่วยลดการทำงานซ้ำ แต่ต้องกำหนดด้วยว่าข้อมูลควรถูกนำกลับมาใช้ได้นานเพียงใด และเมื่อใดควรตรวจสอบข้อมูลใหม่ Next.js มี cacheLife สำหรับกำหนดพฤติกรรมอายุแคช ได้แก่ ช่วงที่ฝั่งไคลเอนต์นำข้อมูลกลับมาใช้ ช่วงที่เซิร์ฟเวอร์เริ่มตรวจสอบข้อมูลใหม่ และช่วงหมดอายุที่ต้องรอข้อมูลใหม่ก่อนตอบกลับ ตัวอย่างแนวทางสำหรับเว็บไซต์ธุรกิจคือ แยกเนื้อหาแนะนำบริษัทที่เปลี่ยนไม่บ่อยออกจากข้อมูลที่เปลี่ยนถี่ แล้วกำหนดนโยบายแคชให้แต่ละส่วนตามความต้องการจริง แทนการใช้ค่าเดียวกับข้อมูลทุกประเภท
อัปเดตข้อมูลแล้ว ต้องจัดการแคชด้วย
แคชที่ทำให้เว็บไซต์เร็วควรมีกลไกอัปเดตเมื่อเนื้อหาเปลี่ยนด้วย เช่น หลังผู้ดูแลแก้ไขบทความหรือรายละเอียดสินค้า revalidateTag ใช้ระบุให้ข้อมูลแคชที่ผูกกับแท็กเข้าสู่กระบวนการตรวจสอบใหม่ โดยเมื่อใช้โปรไฟล์ max ระบบสามารถแสดงข้อมูลเดิมระหว่างดึงข้อมูลใหม่เบื้องหลังได้ การเรียกฟังก์ชันจึงไม่ได้หมายความว่าทุกหน้าที่เกี่ยวข้องจะสร้างข้อมูลใหม่ทันทีพร้อมกัน ก่อนนำไปใช้ ควรกำหนดว่าหน้าใดยอมรับข้อมูลเดิมได้ชั่วคราว และการทำงานใดต้องเห็นข้อมูลล่าสุดทันที จากนั้นเลือกกลไกอัปเดตให้ตรงกับพฤติกรรมที่ต้องการ