หัวข้อ 4: ความแตกต่างระหว่าง Static Web และ Dynamic Web

แนวคิดหลัก

เว็บแต่ละประเภทเหมาะกับโจทย์ต่างกัน บางเว็บต้องการเผยแพร่ข้อมูลที่ไม่เปลี่ยนบ่อย บางเว็บต้องแสดงข้อมูลเฉพาะผู้ใช้แบบ real-time การเลือก Static, Dynamic หรือ Hybrid จึงส่งผลต่อประสิทธิภาพ ความซับซ้อน และต้นทุนของระบบ

Static Web

Static Web คือเว็บไซต์ที่ประกอบด้วยไฟล์ HTML, CSS และ JavaScript ที่ค่อนข้างตายตัว เนื้อหาไม่เปลี่ยนตามผู้ใช้แต่ละคนมากนัก

เหมาะกับ

  1. Landing Page
  2. Portfolio
  3. เอกสารประกอบรายวิชา
  4. เว็บแนะนำองค์กร
  5. Blog ที่ generate หน้าไว้ล่วงหน้า

ข้อดีของ Static Web คือโหลดเร็ว deploy ง่าย ปลอดภัยกว่าในบางกรณี และดูแลระบบน้อยกว่า แต่ข้อจำกัดคือไม่เหมาะกับข้อมูลที่ต้องเปลี่ยนตามผู้ใช้ตลอดเวลา

Dynamic Web

Dynamic Web คือเว็บที่สร้างผลลัพธ์ตามคำขอของผู้ใช้หรือข้อมูลปัจจุบัน เช่น E-Commerce, Social Media, ระบบสมาชิก และ dashboard

ตัวอย่างความสามารถของ Dynamic Web:

  1. แสดงสินค้าเฉพาะหมวดที่ผู้ใช้เลือก
  2. แสดงข้อมูลบัญชีของผู้ใช้หลัง login
  3. เพิ่มสินค้าในตะกร้า
  4. โพสต์ แสดงความคิดเห็น หรือกดถูกใจ
  5. แสดงข้อมูล real-time จาก API

Dynamic Web ยืดหยุ่นและโต้ตอบสูง แต่ซับซ้อนกว่า ต้องดูแล server, database, security และ performance

Hybrid Approach

แนวทาง Hybrid คือการผสม Static Site Generation (SSG) กับ Dynamic API Calls เช่น หน้าเนื้อหาหลักสร้างไว้ล่วงหน้าเพื่อให้โหลดเร็ว แต่บางส่วนเรียก API แบบ dynamic เช่น comments, user profile หรือ search result

ตัวอย่าง:

หน้า course lesson สร้างแบบ static -> คะแนน/ความคืบหน้าผู้เรียนเรียกจาก API

การเลือกแนวทางให้เหมาะกับโปรเจกต์

ประเภทโปรเจกต์ แนวทางที่เหมาะ
Portfolio Static
Landing Page Static หรือ SSG
E-Commerce Dynamic หรือ Hybrid
Social Platform Dynamic
ระบบบทเรียนออนไลน์ Hybrid
Documentation Static หรือ SSG

กิจกรรม

ให้เลือกโปรเจกต์ 3 แบบ ได้แก่ Portfolio, ร้านค้าออนไลน์ และระบบบทเรียนออนไลน์ แล้วอธิบายว่าแต่ละแบบควรใช้ Static, Dynamic หรือ Hybrid เพราะเหตุใด

แบบทดสอบหลังเรียน

  1. Static Web คืออะไร
  2. Dynamic Web เหมาะกับเว็บประเภทใด
  3. Hybrid Approach ช่วยแก้ปัญหาอะไร
  4. เหตุใด Landing Page มักเหมาะกับ Static Web
  5. ระบบ E-Commerce ต้องการ dynamic behavior อะไรบ้าง

กลับสัปดาห์ที่ 1