คอมเมิร์ซแบบ headless บน Workers สำหรับสตูดิโอออกแบบ
ย้ายจาก WooCommerce หนัก ๆ สู่ Astro + Workers + D1 ที่โหลดเร็วใน 40ms ทั่วเอเชีย — โดยยังเก็บระบบหลังบ้านที่ทีมคุ้นเคย
- ลูกค้า
- สตูดิโอออกแบบ · เชียงใหม่
- บทบาท
- ผู้ออกแบบและพัฒนาแพลตฟอร์ม
- ระยะเวลา
- 8 สัปดาห์
- เทคโนโลยี
- Astro, Cloudflare Workers, D1
98
Lighthouse mobile
41ms
p50 TTFB
-70%
ค่าโฮสติ้ง
0
ปลั๊กอินที่ต้องดูแล
01 — โจทย์
เว็บ WooCommerce เดิมใช้ปลั๊กอิน 34 ตัว LCP 4.6 วินาทีบน 4G และมีปัญหาความปลอดภัยจากปลั๊กอินที่ไม่ได้อัปเดต
02 — แนวทาง
แยกหน้าบ้านเป็น static-first บน Workers และเก็บคำสั่งซื้อใน D1 ใช้ cart แบบ client-side ที่ทำงานได้แม้ไม่มี JS เต็มรูปแบบ และทำ CMS หลังบ้านที่ทีมแก้สินค้าเองได้
03 — ผลลัพธ์
Lighthouse 98/100 บนมือถือ, p50 TTFB 41ms ทั่วเอเชีย, ค่าโฮสติ้งลดลง 70% และทีมแก้สินค้าได้เองโดยไม่ต้องรอ dev
เทคโนโลยี
AstroCloudflare WorkersD1KVStripeGitHub Actions
ทำไมไม่เลือก SPA
ร้านค้าขนาดเล็กไม่ต้องการ JS 400KB เพื่อแสดงสินค้า 12 ชิ้น เราเลือก static-first แล้วเพิ่ม interactivity เฉพาะจุดที่ต้องใช้
โครงสร้าง
text
Astro (SSR + islands)
├── / → หน้าแรก, editorial
├── /shop → รายการสินค้า (static + filter island)
├── /api/cart → Worker (KV session)
├── /api/orders → Worker → D1
└── /admin → CMS (auth + D1)ตัวเลขหลัง launch
- LCP 4.6s → 1.1s บน 4G
- ต้นทุนต่อเดือนจาก ~$120 เหลือ ~$18
- conversion rate +22% ในสองเดือนแรก