📡 ดึงข้อมูลแบบ Real‑time ด้วย onSnapshot และ useEffect

🔄 หลักการของ Snapshot Listener

onSnapshot() เป็นฟังก์ชันของ Firestore ที่จะ ฟังการเปลี่ยนแปลงของเอกสาร/คอลเลกชันแบบเรียลไทม์

• เมื่อมีการเพิ่ม/แก้ไข/ลบ เอกสารในคอลเลกชัน → ข้อมูลใน UI จะอัปเดตทันที

import { onSnapshot, collection } from 'firebase/firestore';

---

📦 ตัวอย่างการใช้งานใน Client Component

'use client';
import { useEffect, useState } from 'react';
import { db } from '@/lib/firebaseClient';
import { collection, onSnapshot, query, orderBy, limit } from 'firebase/firestore';

export default function RealTimeMessages() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const q = query(collection(db, 'messages'), orderBy('createdAt', 'desc'), limit(10));
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const docs = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setMessages(docs);
    });

    return () => {
      unsubscribe(); // 🧹 cleanup listener ตอน component ถูก unmount
    };
  }, []);

  return (
    <ul>
      {messages.map((msg) => <li key={msg.id}>{msg.text}</li>)}
    </ul>
  );
}

---

💡 Performance Tips

• 🧭 orderBy + limit → ช่วยลด load จาก snapshot
• 🧹 unsubscribe listener ตอน component unmount เพื่อป้องกัน memory leak
• 🔄 อย่าใช้ onSnapshot ซ้อนซ้อนกันหลายชั้น (แนะนำใช้ useEffect เดียว)
• ⏱️ หมั่น debounce interaction ที่ trigger update บ่อย เช่น input realtime

---

🧪 ตัวอย่างการอัปเดตแบบทันที

เมื่อผู้ใช้ A ส่งข้อความใหม่ หรือผู้ดูแลระบบแก้ไขข้อความ → ผู้ใช้ B ที่เปิดหน้าเว็บอยู่จะเห็นข้อมูลใหม่ทันที โดยไม่ต้อง refresh

---

การใช้ onSnapshot ร่วมกับ useEffect ทำให้ Next.js สามารถแสดงข้อมูลเรียลไทม์จาก Firestore ได้ทันที และควรใช้อย่างระมัดระวังโดยจัดการ lifecycle ของ listener อย่างเหมาะสม เพื่อให้แอปทำงานได้ลื่นและปลอดภัย