Dark mode
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 ใหม่ทั้งหมด