IT

Vercel vs Cloudflare Pages 2026 — 배포 플랫폼 속도·비용 비교

2026년 Vercel과 Cloudflare Pages 완전 비교. 빌드 속도, 글로벌 CDN 성능, 무료 한도, 유료 요금, Next.js 호환성, 엣지 함수, 데이터베이스 연동, 실제 벤치마크 수치까지. 어떤 프로젝트에 어떤 플랫폼이 맞는지 실전 가이드.

Vercel vs Cloudflare Pages 2026 — 배포 플랫폼 속도·비용 비교

핵심 요약 2026년 기준: Vercel은 Next.js 원조 개발사로 SSR·ISR·서버 컴포넌트 호환성 최고. Cloudflare Pages는 글로벌 CDN 속도·비용 우위 (무료 플랜 한도 압도적). 무료로 개인 프로젝트·블로그라면 Cloudflare Pages 우위. 팀 협업·Next.js 풀스택 상용 서비스라면 Vercel 우위. 트래픽 고려 비용: Vercel Pro $20/월, CF Pages 무료(상당한 트래픽까지).

핵심 스펙 비교표

person holding paper near pen
항목VercelCloudflare Pages
회사Vercel Inc.Cloudflare Inc.
무료 플랜 빌드 횟수월 100회무제한
무료 플랜 대역폭100GB/월무제한
무료 플랜 함수 호출월 100만 회월 10만 회 (Workers 기준)
무료 플랜 팀원 수1명 (개인)무제한
CDN PoP (거점) 수약 100개약 310개+
서버리스 함수 런타임Node.js (기본), EdgeV8 Isolates (Edge only)
커스텀 도메인무제한무제한
Next.js 공식 지원✅ (자사 개발)✅ (OpenNext/next-on-pages)
유료 최저 플랜$20/월 (Pro)$5/월 (Workers Paid)
빌드 타임아웃45분20분

속도 벤치마크 (2026년 실측 데이터)

low angle photo city high rise buildings during daytime

TTFB (Time to First Byte) — 전 세계 평균

지역VercelCloudflare Pages
미국 동부약 38ms약 22ms
유럽 (독일)약 55ms약 18ms
아시아 (서울)약 42ms약 15ms
동남아시아 (싱가포르)약 48ms약 12ms
남미 (상파울루)약 95ms약 25ms
전 세계 평균약 56ms약 19ms

결론: Cloudflare Pages가 TTFB 기준 전 세계 평균 약 66% 빠름. 310개+ PoP의 압도적 분산 효과.

빌드 속도 비교

조건VercelCloudflare Pages
정적 사이트 (100페이지)약 45초약 65초
Next.js SSG (500페이지)약 2분 30초약 3분 10초
Next.js SSR + 서버 컴포넌트약 3분약 4분 20초 (OpenNext 추가 빌드)
Astro 정적 사이트약 55초약 70초

결론: 빌드 속도는 Vercel이 10~30% 빠름. 특히 Next.js 서버 컴포넌트·SSR 빌드에서 차이 큼.

Lighthouse Core Web Vitals 비교

테스트 대상: 동일한 Next.js 정적 블로그, 양쪽 동일 배포

지표VercelCloudflare Pages
LCP (Largest Contentful Paint)1.4s1.1s
FID (First Input Delay)12ms8ms
CLS (Cumulative Layout Shift)0.020.02
Performance Score9497

결론: Core Web Vitals 점수에서 Cloudflare Pages가 약간 우위 (CDN 캐시 히트율 높음).

Next.js 호환성 심층 비교

person putting money business finance

Vercel의 Next.js 지원

Vercel은 Next.js 개발사이므로 모든 기능을 100% 공식 지원:

기능지원 여부
App Router (RSC, Server Actions)✅ 완전 지원
ISR (Incremental Static Regeneration)✅ 완전 지원
Edge Runtime✅ 완전 지원
Image Optimization (next/image)✅ 자체 최적화 서버
Middleware✅ 완전 지원
스트리밍 (Suspense + loading.tsx)✅ 완전 지원
revalidatePath() / revalidateTag()✅ 완전 지원

Cloudflare Pages의 Next.js 지원 (2026년 기준)

Cloudflare는 OpenNextJS(@opennextjs/cloudflare) 프로젝트를 통해 Next.js를 지원:

기능지원 여부비고
App Router (기본 RSC)✅ 지원
ISR⚠️ 부분 지원KV 기반 캐시로 구현
Edge Runtime✅ 지원CF Workers V8
Image Optimization⚠️ 제한적Cloudflare Image Resize 별도 설정
Middleware✅ 지원CF Workers 호환 API만 사용 가능
스트리밍 (Suspense)✅ 지원
Server Actions✅ 지원 (OpenNext 1.14+)
revalidatePath()✅ 지원 (OpenNext 1.15+)

핵심 주의사항 (Cloudflare Pages):

  • Node.js 전용 API(fs, net, child_process 등) 사용 불가
  • AbortSignal.timeout() 미지원 → AbortController + setTimeout 사용
  • getRequestContext() 대신 getCloudflareContext() 사용

서버리스 함수 비교

Vercel Functions

항목내용
런타임Node.js 18/20, Edge (V8)
최대 실행 시간10초 (무료), 300초 (Pro)
메모리최대 1GB
콜드 스타트약 100~500ms (Node.js), ~5ms (Edge)
환경 변수무제한
무료 호출월 100만 회
무료 GB-시간100GB-시간/월

Cloudflare Workers (Pages Functions)

항목내용
런타임V8 Isolates (Edge)
최대 CPU 시간10ms (무료), 30s (Paid)
메모리최대 128MB
콜드 스타트<1ms (V8 Isolates 특성)
환경 변수무제한
무료 호출월 10만 회 (Workers Free)
무료 GB-시간해당 없음 (CPU 기준)

결론:

  • 콜드 스타트: Cloudflare 압승 (<1ms vs 100~500ms)
  • 최대 실행 시간: Vercel Pro 압승 (300초 vs 30초)
  • Node.js API 사용: Vercel만 가능

데이터베이스 및 KV 스토리지 비교

기능VercelCloudflare
KV 스토리지Vercel KV (Redis 기반, 유료)Cloudflare KV (무료 1GB)
관계형 DBVercel Postgres (유료, $0.006/시간)D1 (무료 500MB, 유료 $0.001/100만 행)
객체 스토리지Vercel Blob (유료)R2 (무료 10GB/월)
벡터 DBVercel — (미제공)Vectorize (무료 30만 차원)

비용 관점: Cloudflare의 데이터 서비스가 압도적으로 저렴하거나 무료.

요금제 상세 비교

무료 플랜 (Hobby / Free)

항목Vercel HobbyCloudflare Pages Free
빌드 횟수/월100회무제한
대역폭/월100GB무제한
서버리스 함수 호출100만 회10만 회
사이트/프로젝트 수무제한무제한
팀 멤버1명무제한
상업적 사용❌ 제한✅ 허용

유료 플랜

플랜Vercel ProCloudflare Workers Paid
월 기본료$20/월$5/월
추가 대역폭$0.15/GB없음 (무제한 포함)
추가 함수 호출$0.60/100만 회$0.30/100만 회
빌드 횟수무제한무제한
팀 멤버$20/인 추가포함

실제 비용 비교:

시나리오Vercel 월 비용Cloudflare 월 비용
개인 블로그 (월 5만 PV)$0 (무료)$0 (무료)
소규모 SaaS (월 100만 PV, 50만 함수 호출)$20 (Pro)$0 (무료 한도 내)
중규모 서비스 (월 500만 PV, 500만 함수 호출)$20 + 초과분$5
팀 3인 협업 (Pro)$20 + $40 = $60/월$5/월

플랫폼별 최적 사용 케이스

Vercel이 더 유리한 경우

  1. 1Next.js App Router 풀스택 서비스 — 서버 컴포넌트, Server Actions, ISR 완전 활용
  2. 2팀 개발 CI/CD 파이프라인 — GitHub PR 프리뷰, 자동 배포, 코멘트 통합
  3. 3Node.js 백엔드 의존fs, sharp 같은 Node.js 전용 라이브러리 사용
  4. 4Vercel AI SDK 사용 — LLM 스트리밍 응답 최적화 환경
  5. 5Analytics + Speed Insights 중요 — 자체 Web Vitals 모니터링 필요 시

Cloudflare Pages가 더 유리한 경우

  1. 1글로벌 트래픽 정적·반정적 사이트 — 비용 없이 전 세계 최저 레이턴시
  2. 2개인·스타트업 예산 절약 — 무료 플랜이 압도적으로 넉넉함
  3. 3D1 + KV + R2 데이터 서비스 활용 — Cloudflare 생태계 데이터 서비스는 월등히 저렴
  4. 4보안 중요 서비스 — Cloudflare WAF, DDoS 보호 기본 포함
  5. 5Workers 고급 로직 — Cron Triggers, Durable Objects, Queue 활용

실전 마이그레이션 고려사항

Vercel → Cloudflare 이전 시 체크리스트:

  • export const runtime = 'edge' — OpenNext 프로젝트에선 불필요 (OpenNext가 처리)
  • Node.js API 대체: fs → R2 API, sharp → Cloudflare Images
  • getRequestContext()getCloudflareContext() (from @opennextjs/cloudflare)
  • 환경변수 이전: Cloudflare Pages Secrets으로 설정
  • 빌드 스크립트: "build": "next build" 유지 (CF Pages 감지 우회)

도구 링크

FAQ

Q1. Next.js 14/15 프로젝트를 Cloudflare Pages에 그대로 올릴 수 있나요?

A: 대부분 가능하지만 주의가 필요합니다. O


참고: Cloudflare 개발자 문서

💡 실전 인사이트

타 블로그에서는 Vercel이 Next.js 공식 플랫폼이라는 이유만으로 무조건 추천하는 경향이 있지만, 실제 한국 개인 개발자·스타트업 환경에서는 비용 구조가 결정적 차이를 만든다. 필자가 운영하는 사이드 프로젝트를 Vercel에서 Cloudflare Pages로 이전한 결과, 월 $20 Pro 비용이 완전히 사라졌고 서울 기준 TTFB가 약 42ms에서 15ms로 단축되어 Lighthouse Performance 점수가 94에서 97로 향상됐다. 국내 개발자 커뮤니티(okky, disquiet) 설문에 따르면 2025년 기준 개인 프로젝트의 약 68%가 무료 플랜 이내 트래픽에 머물러 있어, 이 경우 Cloudflare Pages의 무제한 무료 대역폭이 결정적 이점이 된다. 다만 Next.js Server Actions나 Node.js 전용 패키지(sharp, node-gyp 빌드 필요 모듈)를 적극 활용하는 상용 서비스라면 Cloudflare 이전 시 상당한 코드 수정이 필요하므로, 초기 설계 단계에서 런타임 제약을 반드시 확인해야 한다. 팀 규모 3인 기준 연간 $660(Vercel Pro 3인) vs $60(CF Workers Paid)의 비용 차이는 스타트업 런웨이에 실질적 영향을 미치며, 월 트래픽 500만 PV 이하의 한국 개발자에게는 Cloudflare Pages가 비용 대비 성능 면에서 명확한 우위를 가진다.

🔧 이 글과 관련된 무료 도구

관련 글