Frontend กับ Backend ต่างกันยังไง?
Frontend คือส่วนของแอปที่ทำงานในเบราว์เซอร์ของผู้ใช้ ได้แก่หน้าเว็บ ปุ่ม ฟอร์ม และแอนิเมชันที่ผู้ใช้เห็นและกด ส่วน Backend คือส่วนที่ทำงานบนเซิร์ฟเวอร์ซึ่งผู้ใช้ไม่เคยเห็น ทำหน้าที่เก็บและดึงข้อมูล ใช้กฎทางธุรกิจ ตรวจสอบว่าใครทำอะไรได้บ้าง และเชื่อมต่อกับบริการอื่น เช่น การชำระเงินและอีเมล ทั้งสองส่วนสื่อสารกันผ่าน API และเมื่อรวมกับฐานข้อมูลก็จะกลายเป็นแอป "full stack"
ทำไมเรื่องนี้สำคัญเมื่อสร้างแอปด้วย AI
เมื่อคุณอธิบายแอปให้ AI builder ฟัง คุณกำลังอธิบายทั้งสองส่วนพร้อมกัน จะรู้ตัวหรือไม่ก็ตาม ประโยคอย่าง "ลูกค้าจองคิวได้" หมายถึงฟอร์มจอง (Frontend) กฎว่าช่วงเวลาไหนยังว่าง (Backend) และที่เก็บการจอง (ฐานข้อมูล)
การรู้แยกส่วนช่วยได้ในสามด้านหลัก ๆ
- ความปลอดภัย สิ่งที่อยู่ใน Frontend ผู้ใช้สามารถเห็นและแก้ไขได้ กฎและ secret ต้องอยู่ใน Backend
- การดีบัก "ปุ่มไม่ตอบสนอง" กับ "ปุ่มตอบสนองแต่ไม่มีอะไรถูกบันทึก" ชี้ไปที่คนละส่วน การบอก AI ให้ชัดว่าคุณเห็นอาการแบบไหนจะช่วยหาสาเหตุได้เร็วขึ้น
- การโฮสต์และค่าใช้จ่าย เว็บที่มีแค่ Frontend โฮสต์ได้ถูกและง่าย ส่วน Backend ต้องรันอยู่ที่ไหนสักแห่ง ซึ่งกระทบทั้งค่าใช้จ่ายและการทำงานของแอปเมื่อไม่มีคนใช้
ตัวอย่างใกล้ตัว
ลองนึกภาพร้านอาหาร
Frontend คือห้องอาหาร ได้แก่เมนู โต๊ะ การตกแต่ง และพนักงานเสิร์ฟที่รับออเดอร์ ทุกอย่างถูกออกแบบมาให้ลูกค้า และลูกค้าเห็นและสัมผัสได้ทั้งหมด
Backend คือครัวและสำนักงาน ได้แก่พ่อครัวที่ทำอาหาร คลังวัตถุดิบ เคาน์เตอร์เก็บเงิน และกฎของผู้จัดการว่าใครได้ส่วนลด ลูกค้าไม่ควรเข้าไปในส่วนนี้ และไม่ควรเข้าได้ด้วย
API คือช่องรับส่งระหว่างสองส่วน เป็นเคาน์เตอร์ที่รับออเดอร์เข้าและยกจานออกมาในรูปแบบที่ตกลงกันไว้ ส่วน ฐานข้อมูล คือคลังวัตถุดิบและสมุดบันทึกออเดอร์
ลูกค้าเขียนใบสั่งอาหารใหม่ได้ (Frontend อยู่ในการควบคุมของเขา) แต่ครัวยังเป็นคนตัดสินว่าจะทำอะไรและคิดราคาเท่าไร นั่นคือเหตุผลที่การตรวจสอบสำคัญต้องอยู่ฝั่ง Backend
แต่ละส่วนทำอะไร
| Frontend | Backend | |
|---|---|---|
| รันบน | อุปกรณ์ของผู้ใช้ในเบราว์เซอร์ | เซิร์ฟเวอร์ที่คุณ (หรือผู้โฮสต์) ควบคุม |
| งานหลัก | แสดงผล รับข้อมูลจากผู้ใช้ ตอบสนองต่อการคลิก | เก็บข้อมูล ใช้กฎ บังคับสิทธิ์ เรียกบริการอื่น |
| ผู้ใช้เห็นและแก้โค้ดได้ไหม? | ได้ เพราะถูกดาวน์โหลดลงเบราว์เซอร์ | ไม่ได้ |
| เก็บ API key ลับได้ไหม? | ไม่ได้ | ได้ ผ่าน environment variables |
| เทคโนโลยีที่พบบ่อย | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| ปัญหาที่พบบ่อย | หน้าจอแตกบนมือถือ ปุ่มไม่ทำงาน หน้าเว็บช้า | ข้อมูลไม่ถูกบันทึก ข้อมูลที่แสดงผิด error ช่องโหว่ด้านความปลอดภัย |
บาง framework ทำให้เส้นแบ่งไม่ชัด เช่น Next.js ที่ให้โปรเจกต์เดียวมีทั้งโค้ดฝั่งเบราว์เซอร์และฝั่งเซิร์ฟเวอร์ หลักคิดยังเหมือนเดิม คำถามที่ต้องถามเสมอคือ โค้ดชิ้นนี้รันที่ไหน?
ตัวอย่างการทำงาน: การจองคลาสโยคะ
นี่คือสิ่งที่เกิดขึ้นเมื่อมีคนจองคลาสโยคะ ทีละขั้น
| ขั้น | ทำงานที่ | สิ่งที่เกิดขึ้น |
|---|---|---|
| 1 | Frontend | หน้าตารางเรียนโหลดขึ้นมาและขอรายการคลาสของสัปดาห์นี้จาก Backend |
| 2 | Backend | อ่านคลาสและการจองจากฐานข้อมูล คำนวณที่นั่งที่เหลือ แล้วส่งรายการกลับเป็น JSON |
| 3 | Frontend | แสดงแต่ละคลาสพร้อมเวลา ผู้สอน และจำนวนที่นั่งที่เหลือ |
| 4 | Frontend | ผู้ใช้เลือกคลาสและกรอกชื่อกับอีเมล ฟอร์มตรวจว่าอีเมลดูถูกต้อง (เป็นการช่วยให้ข้อมูลถูกต้อง ไม่ได้รับประกันว่าถูกต้องจริง) |
| 5 | Frontend ไป Backend | ส่งคำขอ POST /api/bookings ผ่าน API |
| 6 | Backend | ตรวจข้อมูลที่รับมาอีกครั้ง ตรวจว่าคลาสยังไม่เต็ม บันทึกการจอง และขอให้บริการอีเมลส่งยืนยันโดยใช้ secret key |
| 7 | Backend ไป Frontend | ตอบกลับว่า "จองสำเร็จ" หรือ "ขออภัย คลาสเต็มแล้ว" |
| 8 | Frontend | แสดงหน้ายืนยันการจอง |
สังเกตขั้นที่ 4 และ 6 ข้อมูลถูกตรวจสองครั้ง การตรวจฝั่ง Frontend ให้ผลทันที ส่วนการตรวจฝั่ง Backend คือการตรวจที่มีผลจริง เพราะผู้ใช้ที่ตั้งใจสามารถข้าม Frontend ไปได้เลย
คำศัพท์ที่ควรรู้
| คำศัพท์ | ความหมาย |
|---|---|
| Client / server | Client คือเบราว์เซอร์ (หรือแอป) ที่ส่งคำขอ ส่วน server คือฝั่งที่ตอบคำขอ |
| UI | User interface คือหน้าจอและตัวควบคุมต่าง ๆ |
| API | วิธีที่ตกลงกันไว้ให้ Frontend ขอข้อมูลหรือสั่งการจาก Backend |
| Endpoint | URL หนึ่งจุดบน API เช่น /api/bookings |
| Full stack | Frontend + Backend + ฐานข้อมูลรวมกัน ดู แอป full stack คืออะไร |
| Static site | Frontend ที่ไม่มี Backend ของตัวเอง ทุกคนได้ไฟล์ชุดเดียวกัน |
| SPA | Single-page application คือ Frontend ที่อัปเดตหน้าในเบราว์เซอร์แทนการโหลดหน้าใหม่ |
| Server-side rendering (SSR) | เซิร์ฟเวอร์สร้าง HTML ของหน้าก่อนส่งให้ ซึ่งช่วยเรื่องความเร็วและ SEO ได้ |
| Environment variables | ค่าตั้งต้นและ secret ที่ให้กับ Backend ตอนรันโดยไม่เก็บไว้ในโค้ด |
แอปของคุณต้องมี Backend ไหม?
| ถ้าแอปของคุณ… | ต้องมี Backend ไหม? |
|---|---|
| แสดงข้อมูลที่เหมือนกันสำหรับทุกคน | ไม่ต้อง |
| มีฟอร์มติดต่อที่ส่งอีเมลถึงคุณอย่างเดียว | มักต้องมี Backend เล็ก ๆ หรือใช้บริการฟอร์ม |
| เก็บข้อมูลที่คนอื่นต้องเห็น | ต้อง |
| มีการล็อกอินและข้อมูลส่วนตัว | ต้อง |
| รับชำระเงิน | ต้อง อย่างน้อยเพื่อสร้าง checkout และรับ payment webhook |
| ใช้ AI หรือ API อื่นที่มีค่าใช้จ่ายและต้องใช้ secret key | ต้อง เพื่อไม่ให้ key รั่วไปถึงเบราว์เซอร์ |
ข้อผิดพลาดและความเข้าใจผิดที่พบบ่อย
- ใส่ secret key ไว้ใน Frontend ใครก็ตามที่เปิด developer tools ของเบราว์เซอร์จะเห็นได้ นี่คือความผิดพลาดร้ายแรงที่พบบ่อยที่สุดในแอปที่สร้างด้วย AI
- บังคับกฎเฉพาะฝั่ง Frontend การซ่อนปุ่มลบสำหรับผู้ใช้ที่ไม่ใช่แอดมินไม่ใช่การป้องกัน Backend ต้องปฏิเสธคำขอนั้นเอง
- คิดว่า Backend คือแค่ฐานข้อมูล ฐานข้อมูลเก็บข้อมูล แต่ Backend เป็นตัวกำหนดว่าใครอ่านหรือแก้ไขได้ และอย่างไร
- คิดว่า JavaScript หมายถึง Frontend เสมอ JavaScript และ TypeScript ก็รันบนเซิร์ฟเวอร์ได้ด้วย Node.js
- โทษผิดส่วน ถ้าหน้าจอดูถูกต้องแต่ข้อมูลผิด ปัญหามักอยู่ที่ Backend หรือฐานข้อมูล ไม่ใช่การออกแบบหน้าจอ
- สร้างเกินความจำเป็น เว็บโฟลิโอไม่จำเป็นต้องมี Backend เฉพาะ การเพิ่มเข้าไปเพิ่มค่าใช้จ่ายและชิ้นส่วนที่ต้องดูแล
สิ่งที่ควรขอจาก AI builder ของคุณ
- "ส่วนไหนของแอปนี้รันในเบราว์เซอร์ และส่วนไหนรันบนเซิร์ฟเวอร์?"
- "ย้าย API key ทั้งหมดไปไว้ฝั่ง Backend และอ่านค่าจาก environment variables"
- "ตรวจสอบทุกฟอร์มบนเซิร์ฟเวอร์ด้วย ไม่ใช่แค่ในเบราว์เซอร์"
- "บังคับบนฝั่ง Backend ว่ามีเพียงแอดมินที่ลบการจองได้"
- "หน้าจอดูปกติ แต่ข้อมูลไม่ถูกบันทึก ช่วยตรวจ log ของ Backend สำหรับคำขอนี้หน่อย"
- "นี่เป็นเว็บการตลาดง่าย ๆ ให้คงไว้เป็น Frontend อย่างเดียว จนกว่าจะจำเป็นต้องมี Backend"
Frontend และ Backend ใน Mythex
โปรเจกต์ Mythex ใหม่เริ่มจาก Frontend ที่ใช้ Vite, React, TypeScript และ Tailwind และเอเจนต์จะเพิ่ม Backend เมื่อแอปของคุณต้องการ หรือจะขอ API แยกที่เขียนด้วย Node, Python (FastAPI), C# หรือ Java ทำงานคู่กับ Frontend ในโปรเจกต์เดียวกันก็ได้ ในหน้า preview คุณสลับระหว่างเว็บไซต์กับเซิร์ฟเวอร์ API ได้ และเมื่อเผยแพร่ ระบบจะ deploy ทั้งสองส่วน พร้อมเพิ่มฐานข้อมูลและพื้นที่เก็บไฟล์เมื่อจำเป็น เอกสารอธิบาย แอปแบบหลายบริการ ไว้ คู่มือ การโฮสต์เว็บ อธิบายว่าแต่ละส่วนรันอยู่ที่ไหนเมื่อขึ้นระบบจริง และ เทมเพลตแอป เป็นวิธีที่รวดเร็วในการดูตัวอย่างแอป full stack
คำถาม
Frontend กับ Backend ต่างกันยังไง?
Frontend คือส่วนของแอปที่ทำงานในเบราว์เซอร์ของผู้ใช้ ได้แก่หน้าเว็บ ปุ่ม และฟอร์มที่ผู้ใช้เห็นและกด ส่วน Backend ทำงานบนเซิร์ฟเวอร์ที่ผู้ใช้ไม่เห็น ทำหน้าที่เก็บข้อมูล ใช้กฎทางธุรกิจ ตรวจสอบสิทธิ์ และเชื่อมต่อกับบริการอื่น
ทุกแอปต้องมี Backend ไหม?
ไม่จำเป็น เว็บการตลาด เว็บโฟลิโอ หรือ landing page ธรรมดาอาจมีเฉพาะ Frontend แต่เมื่อแอปต้องบันทึกข้อมูลที่ใช้ร่วมกัน ให้ผู้ใช้ล็อกอิน รับชำระเงิน หรือใช้ API key ลับ แอปนั้นจะต้องมี Backend ในรูปแบบใดรูปแบบหนึ่ง
HTML เป็น Frontend หรือ Backend?
HTML, CSS และ JavaScript ที่ทำงานในเบราว์เซอร์เป็น Frontend ส่วน JavaScript ก็รันบนเซิร์ฟเวอร์ได้ด้วย Node.js ซึ่งตอนนั้นเป็นโค้ด Backend ภาษาไม่ได้เป็นตัวกำหนด สิ่งที่กำหนดคือโค้ดนั้นรันที่ไหน
Full stack หมายถึงอะไร?
Full stack หมายถึงการทำงานทั้ง Frontend และ Backend (และมักรวมถึงฐานข้อมูล) แอป full stack คือแอปที่มีครบทั้งสามส่วน ส่วนนักพัฒนา full stack คือคนที่ทำงานกับทุกส่วนเหล่านั้น