
SSR และ SSG ใน Nuxt
Server-side rendering, static generation, hybrid rendering, prerendering, route rules, nitro
1Server-Side Rendering (SSR) ใน Nuxt คืออะไร?
Server-Side Rendering (SSR) ใน Nuxt คืออะไร?
คำตอบ
SSR สร้าง HTML ที่สมบูรณ์บนเซิร์ฟเวอร์ในแต่ละคำขอ จากนั้นส่งไปยังไคลเอ็นต์ ซึ่งช่วยปรับปรุง SEO เนื่องจากเครื่องมือค้นหาได้รับเนื้อหา HTML ที่เข้าถึงได้ทันที และยังช่วยปรับปรุงเวลาในการแสดงผลครั้งแรก (first paint) ด้วย SSR เป็นโหมดการเรนเดอร์เริ่มต้นใน Nuxt 3 ซึ่งต่างจากการเรนเดอร์ฝั่งไคลเอ็นต์ที่ JavaScript สร้างเนื้อหาในเบราว์เซอร์
2Static Site Generation (SSG) ใน Nuxt คืออะไร?
Static Site Generation (SSG) ใน Nuxt คืออะไร?
คำตอบ
SSG สร้างทุกหน้าเป็น HTML แบบสแตติกในตอน build ทำให้สามารถเสิร์ฟไฟล์ที่สร้างไว้ล่วงหน้าได้อย่างรวดเร็วมาก แนวทางนี้เหมาะอย่างยิ่งสำหรับเว็บไซต์ที่มีเนื้อหาไม่เปลี่ยนแปลงบ่อย เช่น บล็อกหรือเอกสารประกอบ ใน Nuxt 3 การใช้ nuxt generate จะเปิดใช้งาน SSG โดยสร้างไฟล์ HTML สำหรับแต่ละ route ที่กำหนดค่าไว้
3ควรใช้คำสั่ง Nuxt ใดในการสร้างเว็บไซต์แบบสแตติก?
ควรใช้คำสั่ง Nuxt ใดในการสร้างเว็บไซต์แบบสแตติก?
คำตอบ
คำสั่ง nuxt generate (หรือ npm run generate หากกำหนดค่าไว้ใน package.json) จะกระตุ้นการสร้างแบบสแตติกของทุกหน้า Nuxt จะไล่ดู route ต่าง ๆ และสร้างไฟล์ HTML สำหรับแต่ละ route ซึ่งจะถูกวางไว้ในโฟลเดอร์ .output/public คำสั่งนี้ใช้สำหรับการดีพลอยไปยังโฮสติงแบบสแตติก เช่น Netlify, Vercel หรือ GitHub Pages
ข้อได้เปรียบหลักของ SSR สำหรับ SEO คืออะไร?
Hybrid rendering ใน Nuxt คืออะไร?
+19 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ Vue.js / Nuxt.js อื่นๆ
พื้นฐาน JavaScript
JavaScript สมัยใหม่ (ES6+)
พื้นฐาน Vue
คอมโพเนนต์ Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
ระบบ Reactivity ของ Vue
พื้นฐาน Nuxt
การดึงข้อมูล (Data Fetching) ใน Nuxt
Server Routes ของ Nuxt
โมดูล Nuxt
Composables ใน Vue
ฟอร์มและการตรวจสอบ Vue
การจัดการสถานะใน Nuxt
การทดสอบ Vue
การ Deploy Nuxt และ CI/CD
ประสิทธิภาพของ Vue
รูปแบบขั้นสูงของ Vue
TypeScript กับ Vue
การยืนยันตัวตน Nuxt
SEO ด้วย Nuxt
การทำ Internationalization ใน Nuxt
สถาปัตยกรรม Vue
ความปลอดภัยของ Nuxt
ระบบนิเวศ Vue
การย้าย Vue 2→3 & Nuxt 2→3
เชี่ยวชาญ Vue.js / Nuxt.js สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี