사이트가 왜 이렇게 느리지?
— Vercel + Supabase 지연의 진짜 원인

바이브코딩으로 만든 사이트, 배포했더니 페이지 로딩이 3~4초. 코드 문제가 아니었습니다. 서버가 지구 반 바퀴를 돌아다니고 있었거든요.

처음엔 코드 문제인 줄 알았습니다

Vercel에 Next.js 프로젝트를 배포했습니다. 로컬에서는 빠른데, 배포하고 나서 SSR 페이지를 열 때마다 화면이 뜨기까지 3~4초가 걸렸습니다. 처음엔 당연히 코드 문제라고 생각했습니다.

왜 뭄바이가 문제였을까요

함수가 미국에 있는 것도 문제였지만, 더 큰 문제는 DB가 인도 뭄바이에 있었다는 점입니다.

FM대로 Supabase 프로젝트를 처음 만들게 되면 리전을 선택하는 화면이 나옵니다. 하지만 MCP로 연결로 승인처리 하면서 문제가 발생했었던 것이였습니다. Supabase의 기본 리전이 인도 뭄바이(ap-south-1)였던 것입니다.

코드가 아무리 최적화돼 있어도, 요청이 지구를 반 바퀴 돌고 있다면 빠를 수가 없습니다.

해결 방법 — 리전을 같은 곳으로 맞춰주면 됩니다

해결책은 생각보다 단순했습니다. 함수 실행 리전과 DB 리전을 가능한 가깝게 맞추는 것입니다. 한국 사용자를 위한 서비스라면 일본 도쿄(Vercel hnd1) 또는 한국 서울(Supabase ap-northeast-2) 조합이 현실적인 최선입니다.

1단계 — Supabase DB 리전 설정 (신규 프로젝트 기준)

Supabase에서 새 프로젝트를 생성할 때 리전 선택 화면에서 한국 서비스라면 아래 두 곳 중 하나를 선택합니다.

2단계 — Vercel 함수 리전 설정

프로젝트 루트에 vercel.json 파일을 만들거나, 이미 있다면 아래 설정을 추가합니다.

// vercel.json 없거나 regions 설정 없음
// → 함수가 iad1 (미국 버지니아)에서 실행됨

{
  "functions": {
    "app/**/*.ts": {
      "regions": ["hnd1"]  // 도쿄
    }
  }
}

Next.js App Router를 사용하고 있다면, 특정 라우트의 런타임 설정으로도 지정할 수 있습니다.

// 해당 파일에 추가
export const preferredRegion = 'hnd1'  // 도쿄

// 또는 배열로 여러 리전 지정 (가장 가까운 곳 자동 선택)
export const preferredRegion = ['hnd1', 'icn1']

3단계 — 배포 후 확인

설정을 적용하고 배포한 뒤, Vercel 대시보드 → Functions 탭에서 실행 리전이 바뀌었는지 확인합니다. 브라우저 개발자 도구(F12) → Network 탭에서 API 응답 시간도 비교해 보면 효과를 직접 확인할 수 있습니다.

# 개선 전후 응답 시간 비교
curl -o /dev/null -s -w "\nTotal: %{time_total}s\n" \
  https://your-site.vercel.app/api/your-endpoint

실제로 어떻게 달라졌나요

리전을 맞추고 나서 수치가 확실하게 달라졌습니다.

페이지가 열리기를 기다리던 3~4초가, 눈 깜짝할 사이에 뜨는 수준이 됐습니다. 코드를 한 줄도 건드리지 않고, 리전 설정 파일 몇 줄만 추가했을 뿐입니다.

처음부터 제대로 설정하기 — 체크리스트

바이브코딩이나 새 프로젝트를 시작할 때 아래 항목을 확인해 두면 나중에 같은 고생을 하지 않아도 됩니다.

• ✓ Supabase 프로젝트 생성 시 리전을 먼저 확인합니다. 한국 서비스라면 도쿄(ap-northeast-1) 또는 서울(ap-northeast-2)을 선택합니다. 기본값 그대로 넘어가지 않습니다.
• ✓ Vercel 배포 후 Functions 탭에서 실행 리전을 확인합니다. iad1이 보이면 vercel.json에 리전을 명시적으로 지정합니다.
• ✓ 함수 리전과 DB 리전을 같은 곳 또는 최대한 가깝게 맞춥니다. 리전이 다르면 DB 쿼리마다 불필요한 지연이 쌓입니다.
• △ SSR 페이지의 DB 쿼리 수를 파악해 둡니다. 쿼리가 많을수록 지연이 선형으로 늘어납니다. N+1 쿼리 문제가 없는지도 함께 확인합니다.
• △ 자주 바뀌지 않는 데이터는 캐싱을 고려합니다. 리전을 맞추는 것 다음으로 효과가 큰 최적화입니다. Next.js의 revalidate나 Vercel KV를 활용하면 DB를 아예 안 거칠 수 있습니다.

자주 묻는 질문

핵심 요약표