Vercel + Supabase 성능 문제 원인과 해결 가이드 — Functions 리전 icn1

Vercel + Supabase 성능 문제 원인과 해결 가이드 — Functions 리전 icn1

Vercel에 프론트엔드를 배포하고 Supabase에 DB를 만들면, 몇 시간 만에 데모 서비스를 띄울 수 있습니다. 그런데 로컬에서는 괜찮았는데 배포 후 목록 조회가 느리거나, 버튼을 눌렀을 때 반응이 늦거나, 첫 요청만 유독 오래 걸리는 경험을 해 본 적 있으신가요?

이 현상은 코드가 틀렸다기보다 리전 불일치, 서버리스 콜드 스타트, 무료 티어 컴퓨팅 한계, 데이터 페칭 방식이 겹치면서 나타나는 경우가 많습니다. 이번 글에서는 원인 4가지와 실무에서 바로 적용할 수 있는 해결 방법을 정리했습니다.

▲ Vercel + Supabase 데모 — 느려지는 이유와 해결 체크리스트

핵심 요약
· 원인 ① — Vercel Functions 기본 리전(미 동부)과 Supabase DB 리전(서울·싱가포르 등) 불일치
· 원인 ② — 서버리스·무료 DB의 콜드 스타트 (첫 요청 지연)
· 원인 ③ — Supabase 무료 티어 Shared CPU · RAM 500MB 한계
· 원인 ④ — 클라이언트 연쇄 요청·N+1·캐시 부재 등 페칭 설계 문제
· 1순위 조치 — Vercel icn1(서울) + Supabase ap-northeast-2(서울) 맞추기

Vercel 리전

icn1

Supabase 리전

ap-northeast-2

무료 DB RAM

500MB

비활성 일시정지

7일

 

---

Vercel + Supabase 스택이 느려지는 흐름

전형적인 데모 구조는 아래와 같습니다.

계층	역할	느려질 때 흔한 지점
브라우저	React·Next.js UI	연쇄 API 호출·과도한 리렌더
Vercel	호스팅·API Routes·Serverless Functions	콜드 스타트·먼 리전 실행
Supabase	Postgres DB·Auth·Storage	무료 인스턴스·일시정지·쿼리 비효율

로컬 개발(localhost)에서는 DB와 앱이 같은 PC에 있어 체감이 빠릅니다. 배포 후에는 지리적 거리와 인프라 특성이 그대로 드러납니다.

 

---

원인 ① Vercel과 Supabase 리전 불일치

가장 흔하고, 가장 먼저 점검해야 할 원인입니다.

기본값 주의

Vercel Functions는 새 프로젝트 기본 리전이 iad1(미국 동부, Washington D.C.)입니다. 반면 Supabase 프로젝트를 만들 때 싱가포르·도쿄·서울 등 아시아 리전을 선택한 경우, API 요청이 대서양을 건너 DB에 도달합니다.

한국 사용자 기준으로 함수는 미 동부, DB는 아시아에 있으면 왕복 지연(RTT)만으로도 수백 ms가 추가될 수 있습니다.

해결 방법 — Vercel 리전을 서울(icn1)로 변경

1

Vercel 대시보드 → 해당 Project → Settings → Functions 메뉴로 이동

2

Deployment Region(Function Region)을 Seoul, South Korea (icn1)로 변경

3

재배포(Redeploy) — 설정만 바꾸고 배포하지 않으면 기존 함수 리전이 유지될 수 있습니다

// vercel.json으로도 지정 가능
{
"regions": ["icn1"]
}

Supabase도 서울 리전으로 맞추기

Supabase 프로젝트 생성 시 Northeast Asia (Seoul) — ap-northeast-2를 선택합니다. 이미 만든 프로젝트의 리전은 변경할 수 없으므로, 미국·싱가포르에 DB가 있다면 새 프로젝트를 서울에 만들고 데이터를 마이그레이션해야 합니다.

서비스	권장 리전 코드	표기
Vercel Functions	icn1	Seoul, South Korea
Supabase DB	ap-northeast-2	Northeast Asia (Seoul)

⚠️ 빌드 리전과 함수 리전은 다릅니다 — Vercel 빌드(Build)는 기본적으로 iad1에서 실행됩니다. 배포 로그에 Running build in Washington, D.C.가 보여도, 런타임 API 요청은 icn1에서 처리됩니다. 느린 조회·처리와 혼동하지 마세요.

💡 Vercel 공식 문서도 함수는 DB와 같은 리전, 또는 최대한 가까운 리전에서 실행할 것을 권장합니다.

 

---

원인 ② 서버리스의 숙명 — 콜드 스타트

콜드 스타트(Cold Start)는 한동안 요청이 없다가 첫 요청이 들어올 때, 서버리스 인스턴스를 새로 띄우느라 지연이 발생하는 현상입니다.

대상	증상	대략적 체감
Vercel Serverless Functions	API Route·서버 액션 첫 호출이 느림	수백 ms ~ 수 초
Supabase 무료 DB	7일 비활성 후 일시정지 → 재개 시 첫 쿼리 지연	약 20~30초

해결 방법

Vercel

런타임·아키텍처 조정

· Edge Runtime — 가벼운 API는 Edge로 옮기면 콜드 스타트가 짧아지는 경우가 많음
· Next.js Server Components — 불필요한 API Route hop 제거
· 데모·내부용 — Uptime Robot 등으로 주기적 핑(남용·비용 주의)

Supabase

무료 프로젝트 일시정지 방지

무료 티어는 7일간 DB 요청이 없으면 자동 일시정지됩니다. 데모 링크를 며칠 뒤 열면 첫 화면이 30초 가까이 멈춘 것처럼 보일 수 있습니다.

· GitHub Actions·cron으로 일 1회 경량 쿼리 실행
· 실사용자가 있는 서비스는 Pro 플랜(일시정지 없음) 검토

📌 데모 발표 전날 — Supabase 대시보드에서 프로젝트가 Paused 상태가 아닌지 확인하고, Vercel Preview URL에서 워밍업 요청을 한두 번 보내 두세요.

 

---

원인 ③ Supabase 무료 티어 컴퓨팅 제한

Supabase 무료 플랜은 Nano 컴퓨트 인스턴스 위에서 동작합니다. 스펙은 대략 아래와 같습니다.

항목	무료(Nano) 티어
CPU	Shared (공유)
RAM	최대 500MB
DB 용량	500MB
디스크 처리량	기준 5 MB/s · 250 IOPS (버스트 가능)
일시정지	7일 비활성 시

데모 데이터가 적어도, JOIN이 많은 쿼리·인덱스 없는 검색·동시 접속이 겹치면 Shared CPU 환경에서는 응답이 들쭉날쭉해집니다.

해결 방법

단계	조치
쿼리 최적화	필요 컬럼만 select · WHERE·JOIN 컬럼에 인덱스 · LIMIT·페이지네이션
연결 관리	Supabase Connection Pooler(Transaction 모드) 사용 · 서버리스에서 직접 연결 남발 금지
플랜 업그레이드	데모에 실사용자가 붙으면 Micro(1GB RAM) 이상 검토 · Pro는 일시정지 없음
RLS·트리거	Row Level Security 정책이 복잡하면 쿼리마다 오버헤드 증가 → 데모 단계는 단순화

💡 Supabase 대시보드 Query Performance·Logs에서 느린 쿼리를 먼저 찾으면, 인프라 탓인지 SQL 탓인지 구분하기 쉽습니다.

 

---

원인 ④ 프론트엔드 데이터 페칭 방식

리전과 인프라를 맞춰도, 클라이언트에서 데이터를 가져오는 방식이 비효율이면 화면은 계속 버벅입니다.

흔한 안티 패턴

패턴	문제
워터폴 요청	목록 로드 → 각 행마다 상세 API 연쇄 호출 (N+1)
클라이언트 전용 페칭	useEffect에서만 fetch → 로딩 스피너 길어짐·번들에서 키 노출 위험
과도한 실시간 구독	데모에 불필요한 Realtime 채널 다수 구독
캐시 없음	탭 전환·리렌더마다 동일 API 재호출
무거운 JSON	select * · 이미지 URL·메타데이터 전부 한 번에 로드

해결 방법

1

서버에서 가깝게 조회 — Next.js Server Components·Server Actions·Route Handler에서 Supabase 호출. 브라우저 ↔ Vercel ↔ Supabase hop을 줄입니다.

2

한 번에 묶기 — 목록+카운트를 단일 쿼리·RPC로 처리. N+1은 JOIN·in 필터로 통합합니다.

3

클라이언트 캐시 — React Query·SWR로 staleTime 설정, 동일 데이터 재요청 방지.

4

로딩 UX — Suspense·스켈레톤 UI로 체감 속도 개선. 데이터는 병렬 Promise.all로 동시 요청.

// 나쁜 예: 행마다 추가 fetch (N+1)
posts.map(p => fetch(`/api/user/${p.user_id}`))

// 좋은 예: 한 쿼리에 관계 포함
supabase.from('posts').select('*, profiles(name, avatar)')

⚠️ 브라우저에서 SUPABASE_SERVICE_ROLE_KEY를 쓰면 안 됩니다. 서버 전용 키는 Vercel Environment Variables에만 두고, 클라이언트는 anon key + RLS를 사용하세요.

 

---

진단 순서 — 무엇부터 할까?

아래 순서대로 점검하면 원인 좁히기가 빠릅니다.

• 리전 — Vercel icn1 · Supabase ap-northeast-2 일치 여부 → 변경 후 재배포
• 첫 요청만 느린가 — 콜드 스타트·Supabase 일시정지 의심 → 워밍업·Pro 검토
• 항상 느린가 — 쿼리·인덱스·N+1·페칭 구조 점검
• 동시에만 느린가 — 무료 Shared CPU 한계 → 쿼리 경량화·플랜 업
• Network 탭 — 브라우저 개발자 도구에서 API 개수·순서·TTFB 확인

증상	우선 의심 원인
배포 직후 첫 클릭만 2~30초	콜드 스타트 · DB 일시정지
모든 API가 항상 300ms+	리전 불일치
목록은 빠른데 카드마다 느림	N+1 페칭
로컬은 빠르고 배포만 느림	리전 + 서버리스 구조

---

자주 묻는 질문 (FAQ)

Q. 정적 페이지만 Vercel에 올리고 Supabase는 브라우저에서 직접 호출해도 되나요?

가능하지만, anon key와 RLS 정책을 반드시 설정해야 합니다. 성능 측면에서는 브라우저 → Supabase 직결보다 서버(또는 Edge)에서 한 번 거치는 구조가 캐시·보안·쿼리 통합에 유리한 경우가 많습니다.

Q. icn1으로 바꿨는데도 빌드 로그는 Washington이에요.

정상입니다. Vercel 빌드는 기본 iad1에서 실행됩니다. 바꾼 것은 런타임 Functions 리전이며, API 응답 속도에 영향을 줍니다.

Q. Supabase 리전을 나중에 서울로 옮길 수 있나요?

기존 프로젝트의 리전 변경은 지원되지 않습니다. 서울 리전에 새 프로젝트를 만들고 백업·복원 또는 마이그레이션 가이드로 데이터를 옮겨야 합니다.

Q. 데모용인데 Pro까지 써야 하나요?

내부 시연·해커톤만이면 무료 + 리전 맞춤 + 쿼리 최적화로 충분한 경우가 많습니다. 외부 사용자·투자자 데모처럼 7일 뒤 링크를 열어야 한다면 일시정지 리스크 때문에 Pro를 검토하세요.

Q. Vercel Hobby 플랜에서 icn1 설정이 되나요?

Functions 리전 변경은 프로젝트 Settings에서 설정할 수 있습니다. 다중 리전 등 일부 옵션은 플랜에 따라 다를 수 있으니, 최신 정책은 Vercel 공식 문서·대시보드를 확인하세요.

 

---

마무리

Vercel + Supabase 조합은 데모 제작 속도가 빠르지만, 기본 리전이 미국 동부인 Vercel과 아시아 DB가 만나면 체감 성능이 크게 떨어집니다. Settings → Functions → icn1 변경과 Supabase 서울 리전 맞춤이 1순위입니다.

그다음 콜드 스타트·무료 티어 한계·페칭 설계를 순서대로 점검하면, 「로컬에선 됐는데 배포하면 느려요」 문제 대부분을 해소할 수 있습니다.

리전 맞추기 → 재배포 → 쿼리·페칭 정리.
Vercel + Supabase 데모도 충분히 빠르게 만들 수 있습니다.

Vercel Functions 리전 문서 → Supabase 리전 문서 →

📌 한 줄 요약 3가지

① Vercel icn1 + Supabase ap-northeast-2 — 리전 불일치가 1순위 원인

② 콜드 스타트·무료 DB 7일 일시정지 — 첫 요청만 유독 느릴 때 점검

③ N+1·클라이언트 워터폴 제거 — Server Components·단일 쿼리·캐시

👉 Vercel GitHub 연동·빌드·배포 가이드

👉 Supabase란? Vercel과 함께 쓰는 풀스택 조합 완전 가이드 — PostgreSQL 백엔드 없이 MVP 빠르게 내는 법

 

 

 

 

 

#Vercel #Supabase #서버리스 #콜드스타트 #Next.js #데모개발 #리전 #성능최적화 #스타트업 #풀스택