Next.js Navigation and Prefetching

Expert guidance on Next.js navigation mechanics including prefetching, streaming, client-side transitions, and optimization techniques for fast page transitions.

@doc-version: 16.2.6

Core Concepts

Next.js ทำให้การเปลี่ยนหน้ารวดเร็วและลื่นไหลเหมือน SPA แม้จะเป็น Server Rendering ผ่าน 4 กลไกหลัก:

1. Server Rendering — เรนเดอร์ HTML ที่เซิร์ฟเวอร์ก่อนส่งมาเบราว์เซอร์
2. Prefetching — โหลดข้อมูลหน้าปลายทางล่วงหน้าใน background
3. Streaming — ส่ง UI บางส่วนมาแสดงก่อน (Header, Skeleton) ขณะรอข้อมูลที่เหลือ
4. Client-side Transitions — อัปเดตเฉพาะส่วนที่เปลี่ยน ไม่รีโหลดทั้งหน้า

Guidelines

1. การใช้ <Link> Component