การนำไปใช้งาน: สแตติกเทียบกับ SSR
สร้างเว็บไซต์แบบสแตติกเต็มรูปแบบด้วย nuxt generate นำแอป SSR ไปใช้งานบนเซิร์ฟเวอร์ Node หรือรันไทม์เอดจ์ และตั้งค่าเอนจิน nitro ของ Nuxt
การนำไปใช้งาน: สแตติกเทียบกับ SSR เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
Nuxt เรนเดอร์ได้ทุกที่
Nuxt 3 รองรับโหมดการนำไปใช้งานสี่รูปแบบ ได้แก่ แบบสแตติก (nuxt generate), SSR (เซิร์ฟเวอร์ Node), เอดจ์ (Cloudflare Workers, Vercel Edge) และ แบบไฮบริด (แยกตามเส้นทาง)
การนำไปใช้งานแบบสแตติก
nuxt generate จะเรนเดอร์ล่วงหน้าทุกเส้นทางเป็นไฟล์ HTML นำโฟลเดอร์ .output/public ไปใช้งานกับโฮสต์แบบสแตติกใดก็ได้ (Netlify, Vercel, GitHub Pages, S3)
npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...
# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/การสร้างเส้นทางแบบไดนามิก
สำหรับเส้นทางอย่าง /blog/[slug] Nuxt จำเป็นต้องทราบ slug ทั้งหมด ให้ระบุรายการเหล่านี้ผ่าน nitro.prerender.routes ใน config
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
}
}
});
// Or auto-discover: Nitro follows links from /, generating any it finds.การนำ SSR ไปใช้งานบน Node
nuxt build จะสร้างเซิร์ฟเวอร์ Nitro จากนั้นนำไปใช้งานบนโฮสต์ Node ใดก็ได้ (Render, Railway, Fly.io หรือ VPS ของคุณ) โดยเรียกใช้ node .output/server/index.mjs
npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets
node .output/server/index.mjs # starts on PORT (default 3000)Nitro — เซิร์ฟเวอร์สากล
เซิร์ฟเวอร์ของ Nuxt 3 คือ Nitro ซึ่งเป็นเอนจินแบบพกพาที่รองรับรันไทม์ทุกประเภท ได้แก่ Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify และ AWS Lambda เปลี่ยนเป้าหมายได้ด้วย nitro.preset
การนำไปใช้งานบนเอดจ์ (Cloudflare Workers)
ตั้งค่าเพรเซ็ตเป็น cloudflare-pages หรือ cloudflare การบิลด์จะสร้าง Worker ที่ทำงานบนเอดจ์ของ Cloudflare
// nuxt.config.ts
export default defineNuxtConfig({
nitro: { preset: 'cloudflare-pages' }
});
// Build, then:
npx wrangler pages deploy ./distการนำไปใช้งานบนเอดจ์ (Vercel Edge)
Vercel จะตรวจหา Nuxt โดยอัตโนมัติและใช้เพรเซ็ตที่เหมาะสม หากต้องการบังคับใช้ Edge Runtime ให้ระบุ preset: 'vercel-edge'
การเรนเดอร์แบบไฮบริด
เส้นทางแต่ละเส้นทางสามารถเรนเดอร์แตกต่างกันได้ โดยกำหนดค่าด้วย routeRules
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true }, // SSG
'/blog/**': { isr: 60 }, // ISR every 60s
'/dashboard/**': { ssr: false }, // SPA (client-only)
'/admin/**': { ssr: true } // SSR (per-request)
}
});การเลือกระหว่างแบบสแตติกกับ SSR
แบบสแตติก: เนื้อหาเปลี่ยนแปลงไม่บ่อย ความเร็วสูงสุด และโฮสต์บน CDN ราคาประหยัด (บล็อก เว็บไซต์การตลาด เอกสาร) SSR: เนื้อหาเฉพาะผู้ใช้ ข้อมูลไดนามิก และผลการค้นหา (แดชบอร์ด อีคอมเมิร์ซ) แบบไฮบริดช่วยให้ผสมผสานได้โดยแยกตามเส้นทาง
ตัวแปรสภาพแวดล้อม
ใช้ runtimeConfig ใน nuxt.config.ts ค่า public จะถูกเปิดเผยแก่ไคลเอนต์ ส่วนค่าอื่น ๆ จะอยู่เฉพาะฝั่งเซิร์ฟเวอร์
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: '', // server-only, set via NUXT_API_SECRET env
public: {
apiBase: 'https://api.example.com' // accessible client-side
}
}
});
// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);การแคชการบิลด์ใน CI
แคช .nuxt/ และ node_modules/ ระหว่างการทำงานของ CI แต่ละครั้งเพื่อเร่งการบิลด์ บน Vercel/Netlify ระบบจะทำให้โดยอัตโนมัติ
การทดสอบประสิทธิภาพ
หลังนำไปใช้งาน ให้เรียกใช้ Lighthouse กับ URL ที่นำไปใช้งานจริง ไม่ใช่ localhost เพราะต้องทดสอบกับ CDN จริง ตำแหน่งเอดจ์จริง และการจำกัดความเร็ว CPU จริง
ตรวจสอบความเข้าใจ
คำสั่ง Nuxt 3 ใดที่เรนเดอร์ล่วงหน้าทุกเส้นทางเป็น HTML แบบสแตติก เพื่อนำไปใช้งานบน CDN อย่าง Netlify หรือ Cloudflare Pages
สรุป: การนำ Nuxt ไปใช้งาน
nuxt generate → แบบสแตติก (นำ .output/public ไปใช้งาน) nuxt build → SSR (นำไปใช้งานด้วย Node) เพรเซ็ตของ Nitro รองรับ Cloudflare, Vercel, Netlify, AWS และอื่น ๆ ใช้ routeRules สำหรับการเรนเดอร์แบบไฮบริด (prerender, isr, ssr, spa แยกตามเส้นทาง) ใช้ runtimeConfig สำหรับตัวแปรสภาพแวดล้อม (ค่าที่เป็น public จะถูกเปิดเผยแก่ไคลเอนต์) ทดสอบด้วย Lighthouse โดยใช้ URL ที่นำไปใช้งานจริง
คำถามที่พบบ่อย
บทเรียน “การนำไปใช้งาน: สแตติกเทียบกับ SSR” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การนำไปใช้งาน: สแตติกเทียบกับ SSR” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การนำไปใช้งาน: สแตติกเทียบกับ SSR”
สร้างเว็บไซต์แบบสแตติกเต็มรูปแบบด้วย nuxt generate นำแอป SSR ไปใช้งานบนเซิร์ฟเวอร์ Node หรือรันไทม์เอดจ์ และตั้งค่าเอนจิน nitro ของ Nuxt คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การนำไปใช้งาน: สแตติกเทียบกับ SSR” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดเส้นทางตามไฟล์และการนำเข้าอัตโนมัติ
- useFetch และ useAsyncData
- โมดูล Nuxt: รูปภาพ การยืนยันตัวตน และ i18n
- การนำไปใช้งาน: สแตติกเทียบกับ SSR