Mission 5: สัมผัส Hot Reload

เป้าหมายของ Mission นี้: เข้าใจว่า Hot Reload คืออะไร และทำไมมันถึงทำให้ การพัฒนาเว็บเร็วขึ้นมาก

Hot Reload คืออะไร

ปกติแล้วถ้าแก้โค้ดแล้วต้องกดรีเฟรชหน้าเว็บเองทุกครั้ง จะเสียเวลามาก Hot Reload คือความสามารถของ Development Server ที่คอยจับตาดูไฟล์โค้ดของคุณ ตลอดเวลา พอมีการบันทึกไฟล์ มันจะส่งการเปลี่ยนแปลงไปอัปเดตหน้าเว็บในเบราว์เซอร์ ให้อัตโนมัติ โดยไม่ต้องกดรีเฟรชเอง — บางครั้งเร็วจนสังเกตไม่ทันด้วยซ้ำ

ลองเล่นดูจริง

เปิดไฟล์ app/globals.css ในโปรเจคที่ดาวน์โหลดมา ใส่ background-color ให้ body แล้วบันทึก — สลับไปดูแท็บเบราว์เซอร์ที่เปิด localhost:3000 ค้างไว้ สีพื้นหลังจะเปลี่ยนให้เองภายในเสี้ยววินาทีโดยไม่ต้องกดรีเฟรชเลย

ทำไม Hot Reload ถึงสำคัญ

• ลองผิดลองถูกได้เร็วขึ้นมาก เพราะเห็นผลทันที
• ไม่ต้องเสียเวลารอ build ใหม่ทั้งหน้า
• ช่วยให้จับ bug ด้าน UI ได้เร็วขึ้น เพราะเห็นความเปลี่ยนแปลงทีละนิด

คำศัพท์สำคัญ