Server-side rendering ด้วย Nuxt เพิ่มเติมอะไร

Question

IT Interview Practice · Accepted Answer

**Nuxt** เป็น meta-framework สำหรับ Vue (เทียบเท่า Next.js สำหรับ React) มันเพิ่ม **server-side rendering (SSR)**, file-based routing และความสามารถ full-stack บน Vue — เปลี่ยน Vue จากไลบรารีฝั่งไคลเอนต์เป็น application framework ที่สมบูรณ์ ## ปัญหาหลักที่ SSR แก้ไข ```text Plain Vue SPA: server sends an empty

+ JS bundle → browser downloads JS, runs Vue, THEN renders content → slow first paint, and crawlers may see a blank page (bad SEO) Nuxt SSR: server renders the full HTML and sends it ready-to-view → fast first paint, content visible immediately, great SEO → Vue then "hydrates" it to make it interactive ``` SSR หมายความว่าเซิร์ฟเวอร์สร้าง HTML ที่สมบูรณ์สำหรับแต่ละคำขอ ดังนั้นผู้ใช้และเครื่องมือค้นหาจึงได้รับเนื้อหาจริงทันที จากนั้น Vue จะเข้ามาใช้งาน (hydration) เพื่อการโต้ตอบ ## สิ่งที่ Nuxt มอบให้ ```text ✓ Rendering modes per route: SSR, SSG (static), ISR, or SPA — your choice ✓ File-based routing — pages/ folder = routes (no manual router config) ✓ Auto-imports — components/composables imported automatically ✓ Server routes / API — server/api/ for backend endpoints (full-stack) ✓ Data fetching — useFetch / useAsyncData that work on server AND client ✓ SEO helpers — useHead/useSeoMeta for meta tags ``` ## ตัวอย่าง File-based routing ```text pages/index.vue → / pages/about.vue → /about pages/users/[id].vue → /users/:id (dynamic) ``` ## การดึงข้อมูลสากล ```vue ``` `useFetch`/`useAsyncData` ดึงข้อมูลบนเซิร์ฟเวอร์ระหว่าง SSR (ดังนั้นข้อมูลจึงอยู่ใน HTML เริ่มต้น) และหลีกเลี่ยงการดึงซ้ำระหว่าง hydration — ความสะดวกหลักของ Nuxt ## ความยืดหยุ่นของโหมด Rendering ```text SSR → fresh HTML per request (dynamic, personalized, SEO) SSG → pre-rendered at build (fastest, for mostly-static content) Hybrid → choose per route via routeRules ``` ## ทำไมจึงสำคัญ Nuxt นำมาให้ Vue สิ่งที่ Next.js นำมาให้ React: SSR/SSG สำหรับ **SEO และการ render เร็ว**, file-based routing, ชั้นเซิร์ฟเวอร์สำหรับ full-stack apps และข้อตกลงที่เหมาะสม (auto-imports, การดึงข้อมูลสากล) สำหรับไซต์เนื้อหา, e-commerce หรือสิ่งใดที่ต้องการ SEO และการโหลดที่รวดเร็ว Vue SPA ธรรมชาติจะไม่เพียงพอ — server rendering ของ Nuxt เป็นคำตอบ พร้อมให้คุณเลือกโหมด rendering ที่เหมาะสมที่สุดต่อแต่ละเส้นทาง

ปัญหาหลักที่ SSR แก้ไข

สิ่งที่ Nuxt มอบให้

ตัวอย่าง File-based routing

การดึงข้อมูลสากล

ความยืดหยุ่นของโหมด Rendering

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

คำถามที่เกี่ยวข้อง