reveal.js

# Client-Side, Server-Side และ Full-Stack

หัวข้อ 3 · Web Programming

---

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

เว็บแอปประกอบด้วยส่วนที่ทำงานบนเครื่องผู้ใช้และส่วนที่ทำงานบน server นักพัฒนาต้องตัดสินใจว่า logic ใดควรอยู่ฝั่งไหน และทั้งสองฝั่งเชื่อมกันอย่างไร

---

## Client-Side

โค้ดที่ทำงานบนเบราว์เซอร์ของผู้ใช้

- HTML
- CSS
- JavaScript

เหมาะกับงานแสดงผล โต้ตอบกับผู้ใช้ ตรวจข้อมูลเบื้องต้น เรียก API และจัดการ state บางส่วน

---

## ข้อควรระวังฝั่ง Client

Client-side ช่วยให้เว็บตอบสนองไวและลดภาระ server บางส่วน

แต่โค้ดฝั่ง browser ถูกมองเห็นได้ จึงไม่ควรวาง secret, API key ลับ หรือ logic สำคัญด้านความปลอดภัยไว้บน client

---

## Server-Side

โค้ดที่ทำงานบน server ก่อนส่งผลลัพธ์หรือข้อมูลให้ผู้ใช้

- Authentication และ authorization
- ติดต่อฐานข้อมูล
- ประมวลผล business logic
- ตรวจสอบข้อมูลแบบจริงจัง
- สร้าง API ให้ frontend เรียกใช้

---

## Full-Stack

การพัฒนาทั้ง Frontend และ Backend ในโปรเจกต์เดียว

```text
Angular Frontend -> Express API -> PostgreSQL Database
```

ผู้พัฒนาต้องเข้าใจ UI, client logic, API, database, security และ deployment

---

## เปรียบเทียบภาพรวม

| ประเด็น | Client-Side | Server-Side | Full-Stack |
|---|---|---|---|
| ประสิทธิภาพ | ตอบสนองไวเมื่อโหลดแล้ว | ควบคุมการประมวลผลรวมศูนย์ | ปรับสมดุลทั้งสองฝั่ง |
| ความปลอดภัย | ไม่ควรเก็บ secret | เหมาะกับ logic สำคัญ | ต้องออกแบบ boundary |
| Scalability | ลดงานบางส่วนจาก server | ต้อง scale server/API | scale ได้หลายชั้น |

---

## ตัวอย่างการแบ่งงาน: Login

Client-Side:

- แสดง form
- ตรวจ input เบื้องต้น
- ส่ง request ไป API
- แสดง error หรือสถานะ login

Server-Side:

- ตรวจรหัสผ่าน
- ออก token/session
- ตรวจสิทธิ์
- บันทึก log ที่จำเป็น

---

## กิจกรรม

เลือกฟีเจอร์ “ระบบเข้าสู่ระบบ” แล้วระบุว่าส่วนใดควรอยู่ Client-Side และส่วนใดควรอยู่ Server-Side พร้อมเหตุผล

---

## จบบทเรียน

<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>