# SSR และ SSG ใน Nuxt (Vue.js / Nuxt.js)

> Server-side rendering, static generation, hybrid rendering, prerendering, route rules, nitro

- 22 คำถามสัมภาษณ์
- Mid-Level
- [คำถามสัมภาษณ์: Vue.js / Nuxt.js](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions.md)

## 1. Server-Side Rendering (SSR) ใน Nuxt คืออะไร?

**คำตอบ**

SSR สร้าง HTML ที่สมบูรณ์บนเซิร์ฟเวอร์ในแต่ละคำขอ จากนั้นส่งไปยังไคลเอ็นต์ ซึ่งช่วยปรับปรุง SEO เนื่องจากเครื่องมือค้นหาได้รับเนื้อหา HTML ที่เข้าถึงได้ทันที และยังช่วยปรับปรุงเวลาในการแสดงผลครั้งแรก (first paint) ด้วย SSR เป็นโหมดการเรนเดอร์เริ่มต้นใน Nuxt 3 ซึ่งต่างจากการเรนเดอร์ฝั่งไคลเอ็นต์ที่ JavaScript สร้างเนื้อหาในเบราว์เซอร์

## 2. Static Site Generation (SSG) ใน Nuxt คืออะไร?

**คำตอบ**

SSG สร้างทุกหน้าเป็น HTML แบบสแตติกในตอน build ทำให้สามารถเสิร์ฟไฟล์ที่สร้างไว้ล่วงหน้าได้อย่างรวดเร็วมาก แนวทางนี้เหมาะอย่างยิ่งสำหรับเว็บไซต์ที่มีเนื้อหาไม่เปลี่ยนแปลงบ่อย เช่น บล็อกหรือเอกสารประกอบ ใน Nuxt 3 การใช้ nuxt generate จะเปิดใช้งาน SSG โดยสร้างไฟล์ HTML สำหรับแต่ละ route ที่กำหนดค่าไว้

## 3. ควรใช้คำสั่ง Nuxt ใดในการสร้างเว็บไซต์แบบสแตติก?

**คำตอบ**

คำสั่ง nuxt generate (หรือ npm run generate หากกำหนดค่าไว้ใน package.json) จะกระตุ้นการสร้างแบบสแตติกของทุกหน้า Nuxt จะไล่ดู route ต่าง ๆ และสร้างไฟล์ HTML สำหรับแต่ละ route ซึ่งจะถูกวางไว้ในโฟลเดอร์ .output/public คำสั่งนี้ใช้สำหรับการดีพลอยไปยังโฮสติงแบบสแตติก เช่น Netlify, Vercel หรือ GitHub Pages

## มีอีก 19 คำถาม

- ข้อได้เปรียบหลักของ SSR สำหรับ SEO คืออะไร?
- Hybrid rendering ใน Nuxt คืออะไร?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/javascript-fundamentals.md): 20 คำถาม, Junior
- [JavaScript สมัยใหม่ (ES6+)](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/es6-modern-javascript.md): 20 คำถาม, Junior
- [พื้นฐาน Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-basics.md): 22 คำถาม, Junior
- [คอมโพเนนต์ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-components.md): 20 คำถาม, Junior
- [Vue Router](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-router.md): 18 คำถาม, Junior
- [Pinia State Management](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/pinia-state-management.md): 20 คำถาม, Junior
- [Vuex (Legacy)](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vuex-legacy.md): 15 คำถาม, Mid-Level
- [Composition API](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/composition-api.md): 24 คำถาม, Mid-Level
- [ระบบ Reactivity ของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-reactivity.md): 20 คำถาม, Mid-Level
- [พื้นฐาน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-fundamentals.md): 22 คำถาม, Mid-Level
- [การดึงข้อมูล (Data Fetching) ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-data-fetching.md): 20 คำถาม, Mid-Level
- [Server Routes ของ Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-server-routes.md): 20 คำถาม, Mid-Level
- [โมดูล Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-modules.md): 18 คำถาม, Mid-Level
- [Composables ใน Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-composables.md): 20 คำถาม, Mid-Level
- [ฟอร์มและการตรวจสอบ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-forms-validation.md): 20 คำถาม, Mid-Level
- [การจัดการสถานะใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-state-management.md): 18 คำถาม, Mid-Level
- [การทดสอบ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-testing.md): 20 คำถาม, Mid-Level
- [การ Deploy Nuxt และ CI/CD](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-deployment-cicd.md): 22 คำถาม, Mid-Level
- [ประสิทธิภาพของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-performance.md): 22 คำถาม, Senior
- [รูปแบบขั้นสูงของ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-advanced-patterns.md): 24 คำถาม, Senior
- [TypeScript กับ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/typescript-vue.md): 22 คำถาม, Senior
- [การยืนยันตัวตน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-auth.md): 20 คำถาม, Senior
- [SEO ด้วย Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-seo.md): 20 คำถาม, Senior
- [การทำ Internationalization ใน Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-i18n.md): 18 คำถาม, Senior
- [สถาปัตยกรรม Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-architecture.md): 22 คำถาม, Senior
- [ความปลอดภัยของ Nuxt](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-security.md): 20 คำถาม, Senior
- [ระบบนิเวศ Vue](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/vue-ecosystem.md): 18 คำถาม, Senior
- [การย้าย Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/migration-vue2-vue3-nuxt2-nuxt3.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/vue-nuxt/interview-questions/nuxt-ssr-ssg