18  17. Supabase Integration จริง

18.0.1 ทำไมต้อง Supabase?

🤔 ทำไมไม่ใช้ Firebase? — Firebase ของ Google เหมาะกับ realtime app แต่: - Firebase Firestore มี query ที่จำกัด ไม่ complex เท่า SQL - Supabase ใช้ PostgreSQL — SQL เต็ม, migrate ไป DB อื่นได้ - Supabase มี Auth + Storage + Edge Functions ใน package เดียว - Open source — self-host ได้ถ้าต้องการ

18.0.2 Setup Client

// ทำไมแยก client.ts กับ server.ts? — เพราะ Next.js App Router
// Component ฝั่ง client ใช้ createBrowserClient
// Component ฝั่ง server (Server Component) ใช้ createServerClient

// src/lib/supabase/client.ts
import { createBrowserClient } from "@supabase/ssr"

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

18.0.3 Dual Source (Local → Supabase)

// ทำไมต้อง Dual Source? — เพราะ:
// 1. Developer ทำงานกับ local data ได้ ไม่ต้องพึ่ง network
// 2. Production ใช้ Supabase แต่ถ้า Supabase ล่ม, fallback ไป local
// 3. preview deployment ก็ใช้ local data ไม่เปลือง DB quota

async function withContentFallback<T>(
  supabaseRead: () => Promise<T>,
  localRead: () => T
): Promise<T> {
  if (!shouldTrySupabase()) return localRead()
  try {
    const value = await supabaseRead()
    if (hasUsableValue(value)) return value
  } catch { /* fallback silently */ }
  return localRead()
}