reveal.js

# Static Web และ Dynamic Web

หัวข้อ 4 · Web Programming

---

## แนวคิดหลัก

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

---

## Static Web

เว็บไซต์ที่ประกอบด้วยไฟล์ HTML, CSS และ JavaScript ที่ค่อนข้างตายตัว

เหมาะกับ:

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

---

## จุดเด่นและข้อจำกัดของ Static Web

จุดเด่น:

- โหลดเร็ว
- deploy ง่าย
- ดูแลระบบน้อยกว่า
- ปลอดภัยกว่าในบางกรณี

ข้อจำกัด:

- ไม่เหมาะกับข้อมูลที่ต้องเปลี่ยนตามผู้ใช้ตลอดเวลา

---

## Dynamic Web

เว็บที่สร้างผลลัพธ์ตามคำขอของผู้ใช้หรือข้อมูลปัจจุบัน

ตัวอย่าง:

- E-Commerce
- Social Media
- ระบบสมาชิก
- Dashboard

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

---

## Dynamic Behavior

ตัวอย่างความสามารถที่มักพบ:

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

---

## Hybrid Approach

ผสม Static Site Generation กับ Dynamic API Calls

```text
หน้า 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 เพราะเหตุใด

---

## จบบทเรียน

<a href="/web-programming/01-introduction/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>