Blockdit Logo (Mobile)
Shoper Gamer
•
6 ส.ค. เวลา 13:00 • วิทยาศาสตร์ & เทคโนโลยี

Next.js 16.3 อัปเดตครั้งใหญ่! ลด RAM ใน dev ได้ถึง 90%, SSR เร็วขึ้น 22%

โดย
Next.js ประกาศเปิดตัวเวอร์ชัน 16.3 อย่างเป็นทางการ โดยเป็นการอัปเดตครั้งใหญ่ที่สุดนับตั้งแต่เวอร์ชัน 16.0 (พฤศจิกายน 2025) พร้อมฟีเจอร์ใหม่และปรับปรุงประสิทธิภาพทั้งในฝั่งพัฒนาและผลิตภัณฑ์ รวมถึง Vercel ได้ประกาศรองรับฟีเจอร์เหล่านี้แล้ว
  • ★
    ​การปรับปรุงสำหรับทุกแอป (ไม่ต้องแก้ไขโค้ด)
- หน่วยความจำ dev ลดลงสูงสุด 90% (Turbopack)
- Build เร็วขึ้น (ใช้แคชจาก build เก่า)
- Type Checking เร็วขึ้น (TypeScript 7)
- SSR เร็วขึ้น 22% (ใช้ Node.js streams)
- Prefetch น้อยลง (รวม payload)
- Cache สินทรัพย์ Static ดีขึ้น (ใช้ข้าม deployment ได้)
- Error Boundaries แบบกำหนดเอง (catchError + retry())
- Glob imports (import.meta.glob)
- Root Params (next/root-params) สำหรับ i18n
  • ★
    ​Instant Navigations
เป็นชุดเครื่องมือที่ทำให้ Next.js ทำงานเหมือน SPA โดยยังคงข้อดีของ SSR โดยเปิดใช้งานผ่าน cacheComponents: true และ partialPrefetching: true ใน next.config.ts
⭐ ฟีเจอร์ย่อย
- Instant Insights : เครื่องมือ dev ที่แสดง navigation ที่ช้า
- Partial Prefetching : ควบคุมปริมาณคอนเทนต์ที่ prefetch ได้ละเอียด
- Better ISR : หน้าเว็บที่ไม่ได้ prerender จะแสดง loading shell ทันที แล้ว prerender เบื้องหลัง
- Navigation Inspector : หยุด navigation เพื่อดู loading state
- Playwright test helper : เขียนเทสยืนยันว่า UI ที่ควรแสดงทันที (instant) ยังคงเป็นเช่นนั้น
2
  • ★
    ​ฟีเจอร์ทดลอง
- Rust React Compiler : ทำงานใน Turbopack โดยตรง (เร็วขึ้น 34-46%)
- Network Resilience : กัน request ค้างไว้เมื่อ offline แล้ว retry เมื่อเชื่อมต่อใหม่ (useOffline hook)
  • ★
    ​การสนับสนุนจาก Vercel
- Prefetch requests ลดลง 45% (โดยเฉลี่ย)
- CDN requests ลดลง 17% (static assets) และลด bytes transfer 24%
- Routing เร็วขึ้น ~2x (p99)
- Observability : ตรวจสอบ prefetch requests, ISR, และ PPR (Partial Prerendering) ได้ใน Dashboard
1
✏️ Shoper Gamer
>> https://shopergamer.vercel.app
  • ✓
    [Shoper Gamer]​ NextJS คืออะไร 👇
Credit :
👇
  • ●
    ​https://vercel.com/blog/vercel-supports-next-js-16-3
  • ●
    ​https://nextjs.org/blog/next-16-3
  • ●
    ​https://nextjs.org/blog/next-16-3-instant-navigations
  • ●
    ​https://daily.dev/posts/next-js-16-3-reami4oyv
โฆษณา