homaroma/frontend-comparison.md

สรุปความแตกต่างและเป้าหมายการใช้งาน: apps/ssr vs apps/website

เอกสารนี้สรุปความแตกต่างเชิงสถาปัตยกรรม (Architecture) และจุดประสงค์การใช้งานระหว่าง Frontend ทั้งสองระบบในโปรเจกต์ iRelax เพื่อให้ทีมพัฒนาเข้าใจว่าควรเลือกใช้หรือพัฒนาต่อยอดที่โปรเจกต์ใด

ตารางเปรียบเทียบ (Comparison Table)

คุณสมบัติ (Feature)	apps/website (SPA)	apps/ssr (Next.js)
สถาปัตยกรรมพื้นฐาน	Single Page Application (SPA)	Server-Side Rendering (SSR)
เครื่องมือ / Framework	React 19 + Vite	Next.js 15 (App Router) + React 19
การประมวลผล (Rendering)	Client-side Rendering (ประมวลผลที่เบราว์เซอร์)	Server-side Rendering (ประมวลผลที่เซิร์ฟเวอร์ก่อนส่งให้ผู้ใช้)
เป้าหมายหลัก (Use Case)	LINE OA / LIFF App, Web App ที่เน้นความลื่นไหล	SEO, การค้นหาผ่าน Google, หน้าเว็บสาธารณะ
จุดเด่น	ทำงานลื่นไหลเหมือนแอปมือถือ (ไม่กระตุกตอนเปลี่ยนหน้า), เหมาะกับ Webview ในแอปพลิเคชัน	ทำ SEO ได้ดีมาก Bot สามารถอ่านข้อมูลสินค้าได้ทันที, โหลดหน้าแรกได้ไว
จุดด้อย	ทำ SEO ได้ยาก (Bot ของ Google อาจจะอ่านข้อมูลไม่ครบเพราะต้องรอ JavaScript ทำงาน)	ต้องใช้ทรัพยากรฝั่ง Server ในการรัน (Node.js Process), ซับซ้อนกว่าในการตั้งค่า
รูปแบบการ Deploy	Static Files (HTML/CSS/JS) เสิร์ฟผ่าน Nginx โดยตรง ไม่ต้องมี Node.js รันเป็นพื้นหลัง	Node.js Server ต้องใช้ PM2 รัน next start และใช้ Nginx ทำ Reverse Proxy
ตำแหน่งไฟล์บน Server	/home/ti/projects/MyNginxMain/nginx/html/irelaxaroma.shop/website	/home/ti/projects/irelax-ssr
คำสั่ง Build	bun run build (ได้โฟลเดอร์ dist)	bun run build (ได้โฟลเดอร์ .next)
Service ที่ทำงาน	ไม่มี (Nginx จัดการทั้งหมด)	PM2 ชื่อ process: irelax-ssr รันบนพอร์ต 3001
การจัดการ Routing	react-router-dom (ประมวลผลที่ฝั่ง Client ทั้งหมด)	Next.js App Router (มีระบบ File-based routing)
การจัดการ State	Zustand	React Context / Zustand / Server Components
ความเหมาะสมของระบบ Login	เหมาะสมกับ LINE LIFF Login และ Token-based auth เพราะมี Context แบบ SPA	เหมาะกับ Cookie-based Auth (NextAuth/Auth.js) หรือ Session

---

สรุปแนวทางการพัฒนา (Development Guidelines)

1. เลือกใช้ apps/website เมื่อ:

• คุณต้องการพัฒนาฟีเจอร์ที่ให้ลูกค้าเปิดใช้งานผ่าน LINE Official Account (LIFF Menu)
• เน้นประสบการณ์ผู้ใช้แบบ App-like UX ที่ต้องการความรวดเร็วในการกดเปลี่ยนหน้า เช่น ระบบตะกร้าสินค้าแบบ Popup หรือ Dashboard ส่วนตัวลูกค้า
• ไม่สนใจเรื่อง SEO (เช่น หน้าจัดการโปรไฟล์ลูกค้าส่วนตัว, หน้า Checkout)

2. เลือกใช้ apps/ssr เมื่อ:

• เป็นหน้าเพจที่ต้องการดึงดูดลูกค้าใหม่ (Acquisition) ผ่าน Search Engine (Google)
• หน้าสินค้า (Product Details), หมวดหมู่สินค้า (Category), หรือบทความ (Blog) ที่คุณอยากให้แชร์ลิงก์แล้วขึ้นภาพ Preview (Open Graph) ที่สวยงามบน Facebook/LINE
• เป็นหน้าหลัก (Landing Page) ที่เน้นความน่าเชื่อถือและต้องการโหลดให้เร็วที่สุดตั้งแต่ครั้งแรกที่เปิด

---

ข้อมูลเชิงลึกด้านการ Build & Deploy (Server Config)

อ้างอิงจากการตั้งค่าในสคริปต์ serverinfo/post-receive บน Server ปัจจุบัน

📱 1. apps/website (Single Page Application)

ระบบนี้ถูกคอมไพล์เป็นไฟล์ Static (HTML, CSS, JS) ซึ่งไม่มีการทำงานของ Server-side รันอยู่เบื้องหลัง

• คำสั่ง Build: cd apps/website && bun run build
• สิ่งที่ได้จากการ Build: โฟลเดอร์ dist/
• ตำแหน่งไฟล์ปลายทาง (Target Directory): /home/ti/projects/MyNginxMain/nginx/html/irelaxaroma.shop/website
• การจัดการ Environment: ต้องประกาศตัวแปรแวดล้อมก่อนสั่ง Build เสมอ (เช่น export VITE_LIFF_ID=...) เพื่อให้ Vite ฝังค่าเข้าไปในไฟล์โค้ด
• การตั้งค่า Nginx ที่จำเป็น (Routing Configuration): เพื่อให้ระบบ React Router ทำงานได้โดยไม่เกิด 404 Error Nginx ต้องถูกตั้งค่าให้โยน Path ที่ไม่รู้จักกลับไปหา index.html เสมอ

  location / {
      root /usr/share/nginx/html/irelaxaroma.shop/website;
      index index.html;
      try_files $uri $uri/ /index.html;  # <--- บังคับให้ SPA จัดการ Route เอง
  }
  

🌍 2. apps/ssr (Next.js Application)

ระบบนี้ต้องการ Node.js Server (รันผ่าน PM2) เพื่อประมวลผลข้อมูลที่ฝั่งเซิร์ฟเวอร์ทุกครั้งที่มีคนเปิดหน้าเว็บ (หรือประมวลผลไว้ล่วงหน้า)

• คำสั่ง Build: cd apps/ssr && bun run build
• สิ่งที่ได้จากการ Build: โฟลเดอร์ .next/ และไฟล์ Source Code
• ตำแหน่งไฟล์ปลายทาง (Target Directory): /home/ti/projects/irelax-ssr
• การจัดการ Service (PM2): ต้องสั่งรันให้แอปทำงานอยู่เบื้องหลังเสมอด้วยคำสั่ง:

  pm2 start /home/ti/projects/irelax-ssr/node_modules/.bin/next --name irelax-ssr -- start -p 3001
  

• การตั้งค่า Nginx ที่จำเป็น (Reverse Proxy): Nginx จะไม่ได้เสิร์ฟไฟล์ตรงๆ เหมือน SPA แต่ทำหน้าที่เป็นประตูส่ง Request ต่อไปให้ PM2 (ที่พอร์ต 3001)

  location / {
      proxy_pass http://127.0.0.1:3001;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
  }
  

---

Generated by Antigravity AI on 2026-05-01