อะไรใหม่ใน Nuxt 4: อัปเดตฟีเจอร์ใหม่สำหรับนักพัฒนา

ผมเชื่อว่าหลายๆ คนคงเคยผ่านประสบการณ์การ upgrade หรือ migrate งานที่ทำอยู่มาบ้าง รู้ดีเลยว่ามันเดือดจริงๆ บาง project ใช้เวลาอัปเกรดเป็นเดือนๆ หรือหลายเดือนเลยทีเดียว แต่ช่วงนี้ด้วยความที่ Nuxt 4 กำลังมา ผมเลยลองใช้งานดู ก็เจอหลายเรื่องที่น่าสนใจของ Nuxt 4 รวมถึงการ upgrade จาก Nuxt 3 ไป Nuxt 4 กับ Concept “A Peaceful Major Upgrade” เลยอยากเอามาแชร์กันครับ

Table of Contents

1. เริ่มจากการแปลงร่าง Nuxt 3 ให้เป็น Nuxt 4 แบบง่ายๆ ด้วยกันปรับ nuxt.config.ts

เริ่มจาก upgrade version nuxt ก่อนแล้วก็ไปปรับ nuxt.config.ts เพียงเท่านี้ Nuxt 3 ของเราก็เป็น Nuxt 4 แล้วง่ายเกิ๊นนนน

bun x nuxi upgrade

2. เพิ่ม Performance ด้วยการปรับ Folder Directory Structure

ตัวอย่าง Directory Structure Nuxt4 vs Nuxt3

Performance: ใน Nuxt 4 เราจะย้าย file หลายๆ อย่างมาอยู่ใน folder app เพื่อเพิ่มประสิทธิภาพในการ scan file ให้ไม่ต้องไป scan ไฟล์อย่างพวก .git และ node_modules ซึ่งจะทำให้ Startup app ได้เร็วขึ้น
IDE type-safety: แยก Server กับ Client (Application) Folder ทำให้เพิ่มประสิทธิภาพของ IDE type safety ได้เพราะทั้งคู่มี context และ global import ที่แตกต่างกัน ข้อมูลจะได้ไม่มั่วมารวมกันแล้ว

แต่แน่นอนว่าทาง Nuxt4 ก็ยังรองรับ Directory Structure แบบเดิมอยู่นะครับ ยังใช้งานได้ตาม concept “A Peaceful Major Upgrade”

3. Shallow Data Reactivity in useAsyncData and useFetch

🚦 Impact Level: Minimal

object data ที่ return มาจากไม่ว่าจะเป็น useAsyncData, useFetch, useLazyAsyncData และ useLazyFetch จะ return กลับมาเป็น shallowRef จากใน Nuxt 3 เป็น ref ทำให้เราไม่สามารถอัพเดท data เข้าไปใน attr ของ obj ได้โดยตรงซึ่งเราแก้ไขได้ 2 ท่า

ท่าที่ 1 set option deep ให้กับ useFetch

ท่าที่ 2 ตั้งค่า global ให้กับ useAsyncData ไปเลย

4. Normalized Component Names

🚦 Impact Level: Moderate
มีรูปแบบ generate ชื่อ pattern ที่แตกต่างจาก Nuxt3 เราสามารถ recheck ได้จาก dev tool

จากตัวอย่างทดลองวาง components UserProfile ที่ /components/user/profile.vue

จะเห็นว่าใน Nuxt3 จะ generate ชื่อ component ว่า profile แต่ใน Nuxt4 generate ว่า UserProfile

ซึ่งตอนที่เราจะใช้ KeepAlive เพื่อ cache component instances ไว้ต้องเรียกชื่อให้ถูกนะครับ และถ้าเกิดเราไม่ให้ generate ชื่อ component แบบใหม่ก็สามารถ setup ให้กับ nuxt.config.ts ตามนี้ได้เลย

5. Removal of Experimental Features

🚦 Impact Level: Minimal
มี 4 ตัว experimental features ถูกถอดออกใน config ของ Nuxt 4

experimental.treeshakeClientOnly will be true (default since v3.0)
experimental.configSchema will be true (default since v3.3)
experimental.polyfillVueUseHead will be false (default since v3.4)
experimental.respectNoSSRHeader will be false (default since v3.4)
vite.devBundler is no longer configurable – it will use vite-node by default

6. Using CodeMod As An Easy Upgrade Path

ใช้ CodeMod ในการ Upgrade Version อันนี้น่าสนใจมากครับ CodeMod คือ Code migrations at lightning speed มันจะมาช่วยเราย้ายไฟล์ setup Nuxt3 ของเราให้กลายเป็น Nuxt4 ได้ โดยแค่ run คำสั่งที่ project

npx codemod@latest nuxt/4/migration-recipe

แต่จากที่ทดสอบเหมือนจะยังไม่สมบูรณ์เท่าไหร่ เพราะส่วนของที่เป็นพวก useAsyncData, useFetch, useLazyAsyncData และ useLazyFetch ไม่มี config option deep: true มาให้ด้วย อาจจะต้องมาใส่เพิ่มเอง หรือเราก็ไป setup จาก nuxt.config.ts เลยก็ง่ายดีครับ

7. Delayed Hydration

ใน Nuxt 4 จะมี Feature ในการคุม Event ต่างๆ และจัดการเรื่อง hydration ของ Component ได้มากขึ้น ลองเข้าไปอ่านที่นี่ได้ https://github.com/nuxt/nuxt/pull/26468 หรือ https://www.npmjs.com/package/vue-lazy-hydration

8. Shared folder for code and types shared with client/server

เราสามารถสร้าง shared folder ขึ้นมาแล้วให้สามารถเรียกใช้ได้ทั้งฝั่ง client และ server

พอเราเอามาใช้งาน เราจะเห็นว่าไม่ต้องทำการ import สิ่งใดๆเข้ามาทั้งใน client หรือฝั่ง server เลย

สรุป

สำหรับเรื่องการ Upgrade Nuxt 4 ด้วย A Peaceful Major Upgrade ถือว่าค่อนข้างตอบโจทย์เพราะตอนทำ Nuxt 2 เป็น Nuxt 3 นี่ปวดตับมากๆ ส่วนเรื่องการปรับ Performance ต่างๆ อันนี้ส่วนตัวค่อนข้างชอบนะครับ แต่ก็ต้องไปลองกับ Project ใหญ่ๆ ดูว่าจะเป็นอย่างไร เพื่อนๆ คนไหนลองแล้วมาชวนคุยกันได้นะครับ