## 17. Supabase Integration จริง

### ทำไมต้อง 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 ได้ถ้าต้องการ

### Setup Client

```typescript
// ทำไมแยก 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!
  )
}
```

### Dual Source (Local → Supabase)

```typescript
// ทำไมต้อง 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()
}
```