PERN Stack
ใช้ใน Challenge Day 3
PERN คือชุดเครื่องมือ 4 ตัวที่ใช้ทำเว็บ full-stack ด้วย JavaScript ทั้งระบบ: หน้าเว็บ (React) เรียก API (Express บน Node.js) แล้ว API ไปอ่านเขียนฐานข้อมูล (PostgreSQL)
At a glance
| ตัวอักษร | เครื่องมือ | ชั้น | หน้าที่ |
|---|---|---|---|
| P | PostgreSQL | Database | เก็บข้อมูลสินค้า ออเดอร์ |
| E | Express | Backend | API: กำหนดว่า URL ไหนทำอะไร |
| R | React | Frontend | หน้าเว็บที่ผู้ใช้เห็น (ในคอร์สใช้ผ่าน Next.js) |
| N | Node.js | Runtime | รัน JavaScript บนเซิร์ฟเวอร์ |
How it works
React (เบราว์เซอร์) ──fetch("/api/products")──▶ Express บน Node.js ──SQL──▶ PostgreSQL
◀────────── JSON ────────── ◀── rows ──- ผู้ใช้เปิดหน้าร้าน React ส่ง request ไปที่
GET /api/products - Express รับ request แล้วส่งคำสั่ง SQL ไปที่ PostgreSQL
- PostgreSQL ตอบกลับเป็นแถวข้อมูล Express แปลงเป็น JSON ส่งกลับ
- React เอา JSON มาแสดงเป็นการ์ดสินค้า
ทำไมต้องมี API คั่นกลางหน้าเว็บไม่เคยคุยกับฐานข้อมูลตรง ๆ รหัสฐานข้อมูลอยู่ที่เซิร์ฟเวอร์เท่านั้น ผู้ใช้จึงมองไม่เห็น
Project structure
แยกเป็น 2 โปรเจกต์ใน repo เดียว รันคนละพอร์ต
shop/
├── client/ ← Next.js (React) http://localhost:3000
└── server/ ← Express (Node.js) http://localhost:4000
├── .env ← DATABASE_URL ของ PostgreSQL
├── db.js
└── index.jsPERN กับ Nextbase ต่างกันอย่างไร
| PERN Stack | [Nextbase](/projects/cs-challenge/nextbase) | |
|---|---|---|
| หลังบ้าน | เขียน API เองด้วย Express | ไม่ต้องเขียน ใช้ Supabase |
| คุยกับฐานข้อมูล | SQL ผ่าน pg | supabase-js |
| เห็นอะไร | เห็นทุกชั้นของระบบ เหมาะกับการเรียนพื้นฐาน | ทำได้เร็ว เหมาะกับ MVP และ hackathon |
| รันกี่ตัว | 2 (client + server) | 1 (Next.js) |
ฝึกต่อ
เว็บสำหรับลงมือทำ
เอกสาร · freecodecamp.orgfreeCodeCamp: Learn the PERN stack บทความคู่กับคอร์สวิดีโอเอกสาร · vercel.comExpress on Vercel deploy ฝั่ง server ได้ด้วย
วิดีโอเรียนเอง
Next steps
- PostgreSQL: สร้างฐานข้อมูล
- Express: เขียน API
- Node.js: รัน JavaScript บนเซิร์ฟเวอร์
CS ChallengeLast updated Oct 2026