การตั้งค่า SSR (Server-Side Rendering) ใน Vite (สำหรับมือใหม่)

SSR คืออะไร?

SSR (Server-Side Rendering) คือการให้ฝั่ง server เป็นคนสร้างหน้า HTML แล้วส่งไปให้ browser โดยตรง (ต่างจาก SPA ที่ browser โหลด JS แล้วค่อย render หน้าเอง)

ข้อดี:

• หน้าเว็บโหลดเร็ว เห็นเนื้อหาทันที (ดีต่อ SEO)
• เหมาะกับเว็บที่มี dynamic content หรือเน้นการค้นหา

ตัวอย่าง: เว็บข่าว, เว็บอีคอมเมิร์ซ, เว็บที่ต้องการ SEO

---

ตัวอย่าง config SSR ที่ใช้บ่อย

export default defineConfig({
  ssr: {
    external: ["pg", "mysql2"], // ไม่ bundle โมดูลเหล่านี้ (โหลดตรงจาก node_modules)
    noExternal: ["lodash-es"], // บังคับ bundle lodash-es ด้วย
    target: "node18", // ให้ bundle สำหรับ Node.js 18
    format: "cjs", // รูปแบบ output: CommonJS (หรือ 'es')
  },
});

---

อธิบายตัวเลือกสำคัญ (แบบมือใหม่)

• external: รายชื่อ dependencies ที่ไม่ต้อง bundle ไปกับ SSR (เหมาะกับไลบรารี native หรือขนาดใหญ่)
• noExternal: รายชื่อ dependencies ที่บังคับให้ bundle ไปด้วย แม้ปกติจะถูก external
• target: ระบุเวอร์ชัน Node.js หรือ environment ที่ SSR bundle จะรัน (เช่น 'node18')
• format: เลือก output SSR bundle เป็น 'cjs' (CommonJS) หรือ 'es' (ESM)
• resolve.conditions/mainFields: ปรับขั้นสูงสำหรับการ resolve package ใน SSR (ส่วนใหญ่ไม่ต้องตั้งเอง)

---

Q&A สำหรับมือใหม่

Q: ต้องใช้ SSR ไหมถ้าเว็บเป็น SPA ปกติ? A: ถ้าเน้น SPA, ไม่ต้องตั้ง SSR ก็ได้ แต่ถ้าต้องการ SEO หรือหน้าโหลดเร็วควรศึกษา SSR

Q: external/noExternal ใช้เมื่อไหร่? A: ถ้าเจอ error ตอน SSR เกี่ยวกับ dependency หรือ native module ให้ลองใช้ external/noExternal ช่วยแก้ปัญหา

Q: target กับ format ต้องตั้งเองไหม? A: ส่วนใหญ่ใช้ default ได้ แต่ถ้ารันบน Node เวอร์ชันใหม่หรืออยากใช้ ESM ให้ตั้งเอง

---

ใน Vite สามารถปรับการตั้งค่า SSR ผ่านอ็อปชัน ssr ใน vite.config.ts หรือ vite.config.js ได้ดังนี้:

ภาพรวม SSR
เมื่อใช้งาน SSR Vite จะ pre-bundle และ optimize โมดูลสำหรับฝั่งเซิร์ฟเวอร์ ร่วมกับจัดการการ resolve dependencies เพื่อให้รัน server-side ได้อย่างราบรื่น โดยอ็อปชันหลักๆ มีดังนี้:

• ssr.external (string[])
  ค่าเริ่มต้น: []
  รายการโมดูลที่จะไม่ถูกบันเดิลใน SSR (โหลดตรงจาก node_modules)

• ssr.noExternal (boolean | string[])
  ค่าเริ่มต้น: false
  กำหนดให้บันเดิลโมดูลที่ปกติจะ external (เช่น noExternal: ['lodash'])

• ssr.target (string | string[])
  ระบุ target environment สำหรับ SSR bundle (เช่น 'node14')

• ssr.resolve.conditions (string[])
  เงื่อนไขที่ใช้ในการเลือก entry point จาก package.json

• ssr.resolve.externalConditions (string[])
  เงื่อนไขการ resolve สำหรับโมดูลที่ external

• ssr.resolve.mainFields (string[])
  ลำดับของ fields ใน package.json ที่ใช้ resolve (เช่น ['module','main'])

• ssr.format ('es' | 'cjs')
  กำหนดรูปแบบ output ของ SSR bundle (เช่น 'cjs')