Next.js 16.3 Instant Navigations: สัญญา cache สำคัญกว่าคลิกที่เร็ว

Dev
ยอดดู 106
Next.js 16.3 Preview เพิ่ม Instant Navigations และ Partial Prefetching ทีมควรวางแผน shell, Suspense, CDN และ revalidation
Instant Navigations คือสัญญาระหว่าง route shell, streaming data, CDN cache และ revalidation

เกิดอะไรขึ้น

Next.js 16.3 Preview เปิดตัววันที่ 24 มิถุนายน 2026 โดยเน้นการแสดง route shell ที่ reuse ได้ทันที แล้วค่อย stream ส่วน dynamic ตามมา

Partial Prefetching ลดการโหลดทั้งหน้าสำหรับทุก link และใช้ shell ต่อ route แทน

ทำไมจึงสำคัญ

ใน dashboard และ SaaS การเห็น shell ที่มีความหมายทันทีหลังคลิกทำให้รู้สึกเร็วขึ้น แต่ต้องแยก UI ที่ prerender ได้กับ data ที่ต้องรอ request-time ผ่าน Suspense และ cache boundary

สัญญาณจากชุมชน

ชุมชนต้องการ navigation ที่ลื่นเหมือน SPA แต่กังวลเรื่อง stale data, search params, PPR และค่าใช้จ่ายจาก prefetch

เช็กลิสต์

เลือก route หลัก 5 รายการ แยก shell/dynamic วัด transferred bytes ใช้ manual prefetch เฉพาะจุดสำคัญ และตรวจ CDN purge สำหรับ HTML/RSC

Instant Navigation checklist

• route shell vs dynamic region

• <Suspense> boundaries

• transferred bytes and RSC timing

• cacheTag / cacheLife ownership

• HTML and RSC CDN invalidation

ความเสี่ยง

ยังเป็น Preview ควรเริ่มจากหน้า read-heavy และติดตาม fallback, stale reports และ server render cost

แหล่งข้อมูล

다른 글