Vercel Blog

Notion을 웹사이트로 변환해주는 Super는 Vercel의 인프라를 활용하여 수만 개의 커스텀 도메인을 자동화된 방식으로 관리합니다. 특히 Domains API, ISR, Edge Middleware를 통해 대규모 트래픽 환경에서도 고성능과 개인화된 사용자 경험을 동시에 제공하며 멀티테넌트 플랫폼 구축의 효율성을 극대화했습니다.

Vercel은 Turborepo와 Vercel Remote Cache를 결합하여 팀원과 CI/CD 환경 간에 빌드 캐시를 공유함으로써 개발 워크플로우의 병목 현상을 해결했습니다. 이를 통해 로컬에서 수행한 빌드 결과물을 원격으로 공유하여 CI 실행 시간을 획기적으로 단축하고 배포 속도를 높였습니다.

본 기사는 600개 이상의 동적 페이지를 보유한 대규모 웹사이트가 Gatsby에서 Next.js로 전환하며 얻은 기술적 성과를 다룹니다. Vercel의 인프라를 활용해 중단 없는 점진적 마이그레이션을 수행했으며, 결과적으로 사이트 성능 지표(Real Experience Score)를 79점에서 90점으로 끌어올렸습니다.

뉴스레터로 시작한 Morning Brew는 Vercel과 Sanity의 헤드리스 스택을 도입하여 콘텐츠 관리의 유효성을 확보하고 신규 비즈니스 확장을 가속화했습니다. 이를 통해 2021년 매출 5천만 달러를 달성하며 글로벌 미디어 브랜드로서의 입지를 굳혔습니다.

AI 연구 기업 Runway는 기존 Netlify와 GitHub Pages 기반의 복잡한 빌드 환경을 Vercel로 통합하여 빌드 시간을 5~8분에서 40초로 대폭 단축했습니다. 이를 통해 개발팀은 빠른 배포가 가능해졌으며, Preview Deployment 기능을 활용해 이해관계자 간의 피드백 루프를 가속화하고 사이트 성능을 최적화했습니다.

Next.js 13의 App Router는 서버 컴포넌트 내에서 직접 데이터를 페칭할 수 있는 구조를 도입하여 기존의 복잡한 데이터 페칭 API들을 단순화했습니다. 이를 통해 개발자는 중복 코드를 줄이고, 사용자는 로딩 UI와 최적화된 캐싱을 통해 더 빠른 웹 경험을 누릴 수 있습니다.

보안 솔루션 기업 Indent는 Next.js와 Vercel의 프리뷰 배포 기능을 통해 팀 간 피드백 속도를 80% 높였으며, 인프라 관리 부담을 최소화했습니다. 이를 통해 엔지니어링 팀은 제품 로직에 집중하면서도 고객에게 초고속 웹 경험을 제공하는 데 성공했습니다.

Vercel은 백업, 알림 전송 등 예약된 작업을 실행할 수 있는 Cron Jobs 기능을 발표했습니다. 개발자는 cron 표현식을 사용하여 작업 주기를 정의할 수 있으며, 이는 Vercel Functions와 Build Output API에서 지원됩니다.

매출 1억 달러를 기록한 HR 플랫폼 Rippling은 페이지 규모가 확대됨에 따라 기존 WordPress 방식의 한계를 극복하기 위해 Next.js와 Vercel 기반의 헤드리스 CMS 구조로 전환했습니다. 이를 통해 개발자의 개입 없이도 스테이크홀더가 즉각적으로 사이트 내용을 업데이트할 수 있는 환경을 구축하여 운영 효율성을 극대화했습니다.

토론토 기반의 디지털 에이전시 Globacore는 팬데믹으로 오프라인 행사가 취소되자, Next.js와 Vercel을 도입하여 웹 중심의 3D 가상 이벤트 서비스로 빠르게 피벗했습니다. 이들은 Vercel의 엣지 네트워크와 프리뷰 배포 기능을 활용해 소규모 팀으로도 글로벌 브랜드에 고성능·고가용성의 디지털 경험을 제공하는 데 성공했습니다.

Vercel Cron Jobs는 cron 표현식을 사용하여 특정 시간에 서버리스 함수를 자동으로 실행할 수 있는 기능입니다. vercel.json 파일을 통해 설정하며, 현재 베타 기간 동안 모든 플랜에서 무료로 제공되어 개발 편의성을 극대화합니다.

Makeswift는 기존의 복잡한 Bazel 기반 빌드 프로세스를 Turborepo로 교체하여 CI 파이프라인 시간을 65% 단축했습니다. 이를 통해 커밋부터 배포까지 걸리는 시간을 20분에서 1분 미만으로 줄이며 개발자 경험과 제품 출시 주기를 획기적으로 개선했습니다.

Next.js의 ISR(Incremental Static Regeneration) 기술을 통해 정적 페이지의 속도와 동적 데이터의 최신성을 동시에 확보하는 전략을 설명합니다. 또한 이미지, 폰트, 코드 분할 등 프레임워크 차원의 최적화 도구를 활용하여 검색 엔진 순위와 사용자 경험을 개선하는 구체적인 플레이북을 제공합니다.

호주의 핀테크 기업 Plenti는 IPO와 리브랜당을 앞두고 기존 워드프레스 스택을 Next.js, Vercel, Strapi 중심의 컴포저블 스택으로 전환했습니다. 이 과정에서 단 한 명의 엔지니어가 Vercel API와 분석 도구를 활용해 자동화된 배포 환경과 사용자 경험 최적화를 구축하며 운영 효율성을 극대화했습니다.

Vercel은 Next.js 13.2와 함께 데이터 단위의 세밀한 캐싱이 가능한 'Next.js Cache' 및 'Vercel Data Cache' 베타 버전을 공개했습니다. 이는 기존 ISR(Incremental Static Regeneration)의 한계를 넘어, 페이지의 일부는 정적으로 유지하면서 나머지 부분은 실시간 개인화 데이터를 반영할 수 있는 하이브리드 렌더링 환경을 구축합니다.

Cruise Critic은 기존 PHP 모놀리식 애플리케이션의 한계를 극복하기 위해 Next.js와 Vercel을 도입했습니다. 이를 통해 빌드 시간을 30분에서 8분 미만으로 줄였으며, 하루에도 여러 번 배포가 가능한 애자일한 개발 환경과 획기적인 웹 성능 개선을 달성했습니다.

이 글은 프론트엔드와 백동이 결합된 모놀리식 커머스의 한계와 이를 해결하기 위한 헤드리스(Headless) 아키텍처의 개념 및 장점을 설명합니다. API를 통해 각 기능을 독립적으로 구성하는 헤드리스 방식은 성능 최적화, 확장성 확보, 그리고 개발 효율성 증대를 가능하게 합니다.

Vercel이 Pro 및 Enterprise 플랜 사용자를 위한 'Monitoring' 기능과 모든 플랜 대상의 'Logs' 기능을 정식 출시했습니다. 이 도구들을 통해 개발자는 실시간 트래픽 급증, 성능 저하, 에러 발생 등을 즉각적으로 파악하고 데이터 기반의 최적화를 수행할 수 있습니다.

Turborepo는 프로젝트 규모가 확장됨에 따라 단순성보다 컴파일 타임의 정확성을 중시하는 방향으로 기술 스택을 변경하고 있습니다. Go 언어의 런타임 오류 가능성과 플랫폼 간 차이 문제를 해결하기 위해, 시스템 프로그래밍에 최적화된 Rust로의 점진적 마이그레이션을 진행합니다.

이 글은 Infrastructure as Code(IaC)의 진화된 형태인 Framework-defined Infrastructure(FdI)의 개념과 가치를 설명합니다. FdI는 프레임워크 소스 코드를 분석하여 필요한 인프라 구성을 자동으로 생성함으로써, 개발자가 별도의 인프라 설정 없이도 확장 가능하고 보안이 강화된 환경을 구축할 수 있게 돕습니다.

Vercel이 Remix를 위한 고급 통합 기능을 발표하며 스트리밍 SSR, API 라우트, 고급 캐싱 기술을 지원합니다. 특히 Node.js와 Edge 런타임 모두에서 동적 콘텐츠 스트리밍이 가능해져 웹 성능 최적화가 더욱 용이해졌습니다.

Vercel은 Remix 프레임워크를 위한 고도화된 통합 기능을 통해 개발자가 별도의 어댑터나 복잡한 설정 없이도 앱을 배포하고 확장할 수 있도록 지원합니다. 특히 경로 단위의 런타임 선택과 고급 캐싱 전략을 통해 서버 사이드 렌더링(SSR)의 성능과 서비스 가용성을 동시에 높일 수 있습니다.

이 글은 기존 CSR과 SSR 방식의 A/B 테스트가 가진 성능 저하 및 레이아웃 시프트 문제를 해결하기 위해 Vercel Edge Config를 활용한 실험 엔진 구축 사례를 다룹니다. 개발자는 Edge Config의 초저지연 읽기 기능을 통해 사용자에게 지연 없는 최적화된 UI를 제공하면서도 정확한 실험 데이터를 확보할 수 있습니다.

기존에는 커스텀 폰트 사용 시 발생하는 레이아웃 흔들림(CLS)을 막기 위해 복잡한 자바스크립트와 CSS 설정이 필요했습니다. 하지만 Next.js의 `next/font`는 자동 셀프 호스팅과 폰트 크기 조정 기능을 통해 코드 몇 줄만으로 최적화된 폰트 로딩 환경을 제공합니다.