0Pricing
Vue Academy · บทเรียน

โหมด SSR เทียบกับ SSG เทียบกับ SPA

ssr:true/false การพรีเรนเดอร์ของ Nitro คำสั่ง generate และการเรนเดอร์แบบไฮบริดต่อเส้นทาง

โหมด SSR เทียบกับ SSG เทียบกับ SPA เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

ภาพรวมโหมดการเรนเดอร์

Nuxt สามารถเรนเดอร์แอปของคุณได้สามรูปแบบ: SSR (เซิร์ฟเวอร์เรนเดอร์ทุกคำขอ), SSG (สร้างหน้าไว้ล่วงหน้าในเวลาสร้าง) และ SPA (ทุกอย่างเรนเดอร์ในเบราว์เซอร์) คุณยังสามารถผสมรูปแบบเหล่านี้ในแต่ละเส้นทางได้ด้วย

SSR: ค่าเริ่มต้น

เมื่อใช้ ssr: true ซึ่งเป็นค่าเริ่มต้น เซิร์ฟเวอร์จะเรนเดอร์ HTML สำหรับแต่ละคำขอ และไคลเอนต์จะทำไฮเดรชันให้หน้าเว็บ วิธีนี้ทำให้การแสดงผลครั้งแรกเร็วและมี SEO ที่ดี เพราะโปรแกรมรวบรวมข้อมูลจะเห็นมาร์กอัปครบถ้วน

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

เมื่อ SSR เหมาะที่สุด

SSR เหมาะกับเนื้อหาที่เปลี่ยนแปลงบ่อยหรือปรับเฉพาะบุคคล เช่น แดชบอร์ด ฟีด และอีคอมเมิร์ซที่มีราคาแบบเรียลไทม์ ซึ่งต้องการ HTML ใหม่ในทุกคำขอ

โหมด SPA

การตั้งค่า ssr: false จะเปลี่ยน Nuxt ให้เป็นแอปหน้าเดียว: เซิร์ฟเวอร์ส่งโครงเปล่า และเบราว์เซอร์เรนเดอร์ทุกอย่าง วิธีนี้โฮสต์ได้ง่ายกว่า แต่ SEO ด้อยลงและการแสดงผลครั้งแรกช้าลง

export default defineNuxtConfig({
  ssr: false
})

เมื่อ SPA เหมาะสม

โหมด SPA เหมาะกับเครื่องมือภายในและแอปที่อยู่หลังกระบวนการเข้าสู่ระบบ ซึ่งไม่จำเป็นต้องมี SEO และต้องการนำไปใช้งานเป็นไฟล์สแตติกบน CDN ใดก็ได้

SSG: การสร้างเว็บไซต์สแตติก

การเรียกใช้ nuxt generate จะเรนเดอร์ทุกหน้าเป็น HTML แบบสแตติกไว้ล่วงหน้าในเวลาสร้าง ผลลัพธ์คือโฟลเดอร์ที่มีไฟล์ ซึ่งคุณสามารถโฮสต์ที่ใดก็ได้โดยไม่ต้องใช้เซิร์ฟเวอร์ Node

npx nuxt generate
# outputs static HTML to .output/public

เมื่อ SSG เหมาะสม

SSG เหมาะอย่างยิ่งกับเนื้อหาที่เปลี่ยนแปลงไม่บ่อย เช่น บล็อก เอกสาร และเว็บไซต์การตลาด หน้าเว็บจะโหลดเร็วมากและให้บริการจาก CDN ได้ในต้นทุนต่ำ

การเรนเดอร์ตามเส้นทางด้วย routeRules

การกำหนดค่า routeRules จะตั้งโหมดการเรนเดอร์ตามรูปแบบเส้นทาง นี่คือ การเรนเดอร์แบบผสมผสาน ซึ่งส่วนต่าง ๆ ของแอปเดียวกันใช้กลยุทธ์ที่แตกต่างกัน

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

ตัวเลือก routeRules ที่ใช้บ่อย

prerender: true จะสร้างหน้าไว้ในเวลาสร้าง ssr: false จะทำให้เป็น SPA swr: n จะแคชผลลัพธ์ SSR เป็นเวลา n วินาที (ให้บริการข้อมูลเก่าระหว่างตรวจสอบใหม่) ส่วน redirect จะส่งผู้ใช้ไปที่อื่น

การสร้างสแตติกใหม่แบบเพิ่มขึ้น

ตัวเลือก isr จะเรนเดอร์ล่วงหน้าเมื่อมีคำขอครั้งแรกและแคชผลลัพธ์ไว้ จากนั้นสร้างใหม่เป็นระยะ ๆ วิธีนี้ผสานความเร็วของ SSG เข้ากับความสดใหม่ของ SSR สำหรับหน้าที่มีผู้เข้าชมมาก

routeRules: {
  '/products/**': { isr: 600 }
}

การเลือกกลยุทธ์

เริ่มด้วย SSR เพื่อให้ได้ค่าเริ่มต้นที่เหมาะที่สุดทั้งด้าน SEO และการโต้ตอบ ใช้ SSG กับเนื้อหาแบบสแตติก ใช้ SPA กับแอปส่วนตัว และใช้ routeRules เพื่อปรับแต่งเส้นทางแต่ละเส้นเมื่อเห็นความต้องการด้านประสิทธิภาพชัดเจนขึ้น

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับโหมดการเรนเดอร์

สรุป

คุณได้เรียนรู้โหมดการเรนเดอร์:

  • SSR (ค่าเริ่มต้น) เรนเดอร์ตามแต่ละคำขอ จึงมี SEO ที่ดีและการแสดงผลครั้งแรกที่รวดเร็ว
  • ssr:false ให้ผลเป็น SPA สำหรับแอปส่วนตัว
  • nuxt generate สร้างเว็บไซต์ SSG แบบสแตติก
  • routeRules เปิดใช้การเรนเดอร์แบบผสมผสาน: prerender, swr, isr และ ssr:false แยกตามเส้นทาง

คำถามที่พบบ่อย

บทเรียน “โหมด SSR เทียบกับ SSG เทียบกับ SPA” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “โหมด SSR เทียบกับ SSG เทียบกับ SPA” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “โหมด SSR เทียบกับ SSG เทียบกับ SPA”

ssr:true/false การพรีเรนเดอร์ของ Nitro คำสั่ง generate และการเรนเดอร์แบบไฮบริดต่อเส้นทาง คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “โหมด SSR เทียบกับ SSG เทียบกับ SPA” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. โครงสร้างโปรเจกต์ Nuxt 3 และการกำหนดเส้นทางจากไฟล์
  2. การดึงข้อมูล: useFetch และ useAsyncData
  3. เส้นทางเซิร์ฟเวอร์และจุดปลายทาง API ของ Nuxt
  4. โหมด SSR เทียบกับ SSG เทียบกับ SPA
← กลับไปที่ Vue Academy