Skip to content

Rendering ใน Web Framework เช่น Vite, Next.js และ Nuxt.js มี 3 รูปแบบหลัก ดังนี้:

Client Side Rendering (CSR)

Server ส่ง JavaScript มาให้ client สร้าง HTML เอง
คำอธิบายเพิ่มเติม: Client ใช้ JavaScript เพื่อสร้าง HTML แบบ dynamic ใน browser โดย server ส่ง JavaScript และข้อมูล (เช่น JSON) เพื่อให้หน้าเว็บ interactive ทันที (เช่น Vite กับ React/Vue)

Server Side Rendering (SSR)

Server สร้าง HTML แล้วส่งมายัง client
คำอธิบายเพิ่มเติม: Server สร้าง HTML แบบ dynamic ตาม request และส่งไปยัง client พร้อม JavaScript เพื่อ hydrate ทำให้หน้าเว็บ interactive (เช่น Next.js, Nuxt.js)

Static Site Generation (SSG)

สร้าง HTML ล่วงหน้าตอน build time
คำอธิบายเพิ่มเติม: สร้าง HTML ล่วงหน้าในช่วง build time (เช่น ตอนรัน bun run build หรือ npm run build) เป็นไฟล์ static พร้อมใช้งานทันที เหมาะกับเนื้อหาคงที่ (เช่น Next.js, Nuxt.js, หรือ Vite กับ VitePress)

บาง Framework อาจมีรูปแบบเพิ่มเติม เช่น Incremental Static Regeneration (ISR) ใน Next.js ที่อัปเดตหน้า static โดยไม่ต้อง build ใหม่ทั้งหมด