Next JS 치트 시트
2025.05.16 09:25:46
Next.js의 강점 중 하나는 Next.js의 프론트엔드 엔드포인트를 백엔드 서버가 없이 웹 어플리케이션을 구현할 수 있다는 점이다. 하지만 강력한 서버리스 플랫폼인 Firebase는 CSR이 사실상 강제되어 Next.js에서 사용할 수 없다. 이에 대한 대안이 Supabase 이다.
Next.js와 Firebase 연동의 문제점
1. Firebase SDK는 무조건 클라이언트 사이드 지향 (CSR)
- Firebase는 브라우저에서 직접 연결하는 방식이 전제.
- 즉 RSC 서버 환경에서는 Firebase SDK 자체가 쓸모없음.
- 서버 환경에서 쓰려면 Admin SDK 사용 → 이건 Firebase Functions 같은 별도 서버를 운영해야 함.
2. Firebase는 SSR-friendly하지 않음
- Firebase Client SDK는
window,navigator등 브라우저 API 필요. - App Router의 Server Component에서는 사용 시 바로 오류 (
ReferenceError). - 클라이언트에서만 초기화 가능 → RSC, SSR 활용 불가.
3. DB 접근 패턴이 전통적인 SQL 아님
- Firebase Realtime DB, Firestore → NoSQL 기반 (Document 중심).
- SQL-like join, view, aggregate 불가 → 복잡 쿼리에서는 오히려 불편.
- 앱스케일은 되지만 RSC에서 효율적인 데이터 페치 어려움.
Next.js와 Supabase 연동의 강점
1. SQL 기반 → 서버에서 안전하게 직접 Query 가능
- Supabase는 PostgreSQL 기반 → SQL 그대로 Server Component에서 직접 Query 가능.
- Next.js App Router Server Actions, Route Handlers와 완벽 호환.
- SDK 없이도
fetch만으로 REST, GraphQL, RPC 사용 가능 → Zero Client Overhead.
2. 서버 전용 기능 → Supabase Edge Functions, Row Level Security 지원
- 서버에서
Row Level Security바로 적용 가능 → API 없이도 안전. - Firebase는 이걸 따로 Firebase Functions에서 구현해야 함.
- App Router에서 Supabase는 그냥
fetch만 하면 됨 → Admin SDK 불필요.
3. Supabase Storage, Auth → 서버 클라이언트 양쪽 자연스럽게 사용
- Supabase Auth → JWT 기반 → 서버/클라이언트 동일하게 SSR 가능.
- Storage → RSC에서도
fetch로 안전하게 파일 접근. - App Router SSR 단계에서 바로 Supabase 클라이언트 없이도 Fetch 가능.
차이 요약
| 구분 | Firebase Client SDK | Supabase |
|---|---|---|
| App Router 호환성 | ❌ 클라이언트에서만 (SSR 안됨) | ✅ Server Component에서도 Fetch 가능 |
| DB 접근 | ❌ NoSQL → 복잡, Join 어려움 | ✅ SQL → Join, Aggregate 가능 |
| 보안 | ❌ Client API Key 노출 문제 있음 | ✅ Row Level Security 서버에서 안전하게 처리 |
| Auth | ❌ 클라이언트 중심, SSR 어려움 | ✅ JWT 기반 → SSR/CSR 양쪽 모두 안전하게 사용 |
| 스토리지 | ❌ 클라이언트 SDK 필요 | ✅ 서버에서도 fetch로 접근 가능 |
결론
- App Router(RSC)는 Fetch-first 패러다임 → Supabase는 Fetch로 Next.js와 연동 가능 → RSC 친화적.
- Firebase는 여전히 CSR 환경에서는 유리,
그러나 App Router, SSR, 서버 페치 최적화 관점에서는 Supabase가 강점