การดึงข้อมูลล่วงหน้า (Prefetching) ช่วยให้การนำทางระหว่างเส้นทาง (routes) ต่าง ๆ ภายในแอปพลิเคชันให้ความรู้สึกเหมือนเป็นแบบทันที . Next.js จะพยายามดึงข้อมูลล่วงหน้าอย่างชาญฉลาดโดยอัตโนมัติ โดยอิงจากลิงก์ที่ใช้ในโค้ดแอปพลิเคชันของเรา . การทำงานของ Prefetching คืออะไร? เมื่อมีการนำทางระหว่างเส้นทาง (routes) เบราว์เซอร์จะร้องขอ asset ที่จำเป็นสำหรับหน้า เช่น ไฟล์ HTML และ JavaScript การ prefetching คือกระบวนการร้องขอ resource เหล่านี้ล่วงหน้า ก่อน ที่จะมีการนำทางไปยัง route ใหม่ . Next.js จะแบ่งแอปพลิเคชันออกเป็น JavaScript chunks ขนาดเล็กตามเส้นทาง แทนที่จะโหลดโค้ดทั้งหมดตั้งแต่ต้นเหมือน SPA แบบเดิม ๆ จะโหลดเฉพาะโค้ดที่จำเป็นสำหรับ route ปัจจุบันเท่านั้น ซึ่งจะช่วยลดเวลาโหลดเริ่มต้น ในขณะที่ส่วนอื่นของแอปจะถูกโหลดแบบเบื้องหลัง เมื่อผู้ใช้คลิกลิงก์…
Category: Next.js
บันทึกการเขียนเว็บไซต์ใหม่ในรอบ 10 ปี ย้ายมาใช้ Next.js
1. โจทย์ คือ อยากได้เว็บใหม่ที่ผู้ใช้ต้องสามารถตรวจสอบคอร์สเรียนได้(คอร์สหลังๆ ผมส่งให้ทางเมล) และต้องทำให้เสร็จภายใน 2 สัปดาห์ เพราะผมติดสอน และต้องเปิดคอร์สใหม่ และต้องย้ายอีเมลของ user จากระบบเดิมกว่า 10,000 อีเมล มาฐานข้อมูลใหม่ และยังมีระบบ API เดิมที่ยังย้ายไม่ได้แต่ต้องใช้ต่อเนื่องด้วย คือย้ายบางส่วนก่อน บางส่วนจะทยอยย้าย 2. เว็บเดิมเขียนด้วย PHP (ใช้ Yii Framework 1.x) ใช้มามากกว่า 10 ปี เดิมใช้ฐานข้อมูล MySQL เวอร์ชัน 5.x เพิ่งอัปเกรดเป็น 8.x เมื่อต้นปี 2025 นี้ 3. ส่วนเวอร์ชันของ PHP เว็บเดิม เวอร์ชัน 5.x เพิ่งอัปเกรดมาเป็น 7.4 เมื่อต้นปี 2025…