Vue vs Nuxt เลือกใช้อะไรดี
เคยได้ลองใช้ทั้ง 2 ตัวเลยนำมาเปรียบเทียบให้ดูมีอะไรน่าสนใจ
Vue คืออะไร
Vue คือ Modern JavaScript Framework ที่ทำงานแบบ SPA(Single Page Application)
Nuxt คืออะไร
Nuxt คือ Framework ที่เอา Vue มาปรับปรุงประสิทธิภาพ และปรับแต่งให้ทำงานได้ดีกับ SSR(Server Side Rendering) ทำให้รองรับ SEO (Better SEO) เว็บแสดงผลได้เร็วขึ้น(Faster time-to-content) และเป็นผลให้ Google Page Speed ดีขึ้นกว่าแบบ SPA
ข้อดีของ Vue
Update version เร็วกว่า
Version ออกใหม่ จะเร็วกว่าของ Nuxt เพราะ Nuxt ต้องเอา Vue ไปปรับใช้อีกที
Hot reload เร็วกว่า
Vue Hot reload ที่ Client side ด้านเดียว ทำให้เร็วกว่าของ Nuxt
ข้อเสียของ Vue
ทำ SSR ยุ่งยาก
ถ้าอยากเอา Vue มาทำ SSR จะต้องมีขั้นตอนทำที่ยุ่งยาก ต้องเก่ง Webpack และเข้าไปปรับแต่งเพื่อให้ได้ Perfomanance ขนาดใน Document การทำ SSR ของ Vue ยังแนะนำให้ใช้ Nuxt ถ้าคุณยังไม่เชี่ยวชาญ Vue และ Webpack
This guide will be very in-depth and assumes you are already familiar with Vue.js itself, and have decent working knowledge of Node.js and webpack. If you prefer a higher-level solution that provides a smooth out-of-the-box experience, you should probably give Nuxt.js
ข้อดีของ Nuxt
SSR Support
จุดเด่นของ Nuxt เลย คือเรื่อง Support SSR(Server Side Rendering) ซึ่งถ้าทำใน Vue จะต้องใช้ขั้นตอนมากพอควร ในขณะที่ Nuxt เริ่มใช้ได้เลย
Performance optimize
Nuxt มีการปรับแต่งให้ Web มีประสิทธิภาพที่ดีขึ้น
Plugin Integration
Nuxt มีการตรวจสอบ Plugin ที่ใช้กับ Nuxt ทำให้ใช้กับ SSR แบบไม่มีปัญหาความเข้ากันได้
Great project structure
Nuxt มีการเตรียมโครงสร้าง Project มาให้พร้อมเริ่มใช้งาน ไม่ต้องมาเถียงกันจะวางโครงสร้างแบบไหน
Automatic Routes
Nuxt จัดเตรียม Route ไว้ให้แล้ว แค่วางไฟล์ตามโครงสร้าง Folder ไม่ต้องมาทำ Route ให้ยุ่งยาก
Auto Import Component
ใน Version 2.3 ไม่ต้อง Import Components เพียงนำ Components ไปวางใน Folder Components ก็สามารถเรียกใช้ใน Template ได้เลย
Build type (SSR, SPA, Static)
ถ้าใช้ Nuxt จะเลือกได้ว่าจะ Build แบบใหน โดยแก้ Config ไม่กี่ตัว
ข้อเสียของ Nuxt
Hot reload ช้ากว่า
ขั้นตอนการ Dev อาจจะมีหงุดหงิดบ้างเล็กน้อย เพราะ Nuxt ต้องทำ Hot reload Server Side ด้วย
Update version ช้ากว่า
ตอนนี้ Vue3 ออกมาช่วงปลายปี 2020 แล้ว แต่ของ Nuxt ยังไม่รองรับ Vue3 (มีแผนจะรองรับประมาณ Q4/2021)
มีการปรับ Syntax ของ Vue บางตัว
เช่นเปลี่ยนจาก <RouterLink>
เป็น <NuxtLink>
แต่ Syntax ส่วนใหญ่ก็เหมือนของ Vue
บางคนอาจไม่ชอบ Project structure ของ Nuxt
Nuxt เตรียม Structure มาให้แล้วอาจจะไม่ชอบใจ รวมถึง Automatic Routes ที่ต้องวางโครง Route ตาม Folder
สรุปเลือกอะไรดี
Vue และ Nuxt ต่างก็มีข้อดีข้อเสียต่างกันไป การนำไปใช้ควรขึ้นอยู่กับงานเป็นหลัก สำหรับผม จะเลือกใช้
Vue เมื่อไม่ต้องการใช้ SSR เช่น Internal Application, Admin Web
Nuxt เมื่อต้องการใช้ SSR เช่นทำเว็บ Public ออกข้างนอก สนใจ SEO และ Google Page Speed เพราะ SSR ทำให้ Google Page Speed คะแนนดีกว่าแบบ SPA นอกจากนั้น Nuxt ยังปรับ Performance ให้ดีขั้น รวมถึง Plugin ที่ใช้กับ Nuxt เข้ากันได้ดีกับ SSR