Vercel Blog

Vercel의 CPO Tom Occhino는 실제 서비스 환경에서 사용 가능한 수준의 AI 에이전트를 제작하기 위한 'The Agent Stack'을 소개했습니다. 이 스택은 개발자가 프로덕션급 에이전트를 신속하게 구축하고 배포할 수 있도록 필수적인 빌딩 블록들을 제공하는 것을 목표로 합니다.

모노레포는 여러 프로젝트를 하나의 저장소에 통합하여 코드 공유, 협업, 업데이트 관리를 용이하게 하는 아키텍처입니다. Turborepo는 대규모 기업의 워크플로우를 오픈 소스로 구현하여, 복잡한 설정 없이도 빠른 빌드와 원격 캐싱을 통해 개발 생산성을 획기적으로 높여줍니다.

Vercel은 기존 Next.js 8 기반의 데모 앱을 v12로 업그레이드하여 Core Web Vitals를 비약적으로 개선했습니다. getStaticProps를 통한 데이터 프리페칭과 next/image를 이용한 이미지 최적화가 성능 향상의 핵심 동력이었습니다.

HashiCorp는 페이지 수가 급증한 버전별 문서 관리 문제를 해결하기 위해 Next.js의 ISR 기술을 도입했습니다. 이를 통해 인기 페이지는 사전 생성하고 나머지는 런타임에 생성하며, On-demand ISR로 CMS 변경 사항을 즉각 반영하여 빌드 효율성을 극대화했습니다.

Vercel과 MongoDB는 MongoDB World에서 양사의 통합 기능을 발표하며, 프론트엔드 인프라와 데이터베이스를 유기적으로 연결하는 풀스택 서버리스 개발 환경을 선보였습니다. 이를 통해 개발자는 복잡한 설정 없이 Next.js 기반의 애플리케이션을 전 세계로 빠르게 확장하고 배포할 수 있습니다.

Edge Runtime은 프레임워크 제작자가 엣지 컴퓨팅을 쉽게 도입할 수 있도록 Web 표준에 따라 설계된 경량 런타임입니다. Node.js와 호환되는 일부 API를 제공하면서도, 프로덕션 환경에서는 V8 엔진을 직접 사용하여 고성능 서버리스 환경을 구현하는 것이 핵심입니다.

Vercel이 Edge Functions를 공개 베타로 출시했으나, 신규 프로젝트에서는 이를 더 이상 권장하지 않고 Node.js 기반의 Vercel Functions 사용을 권고합니다. 대신 요청 시점의 라우팅에는 Routing Middleware를 활용하도록 기술 스택의 변화를 안내하고 있습니다.

Vercral Edge Middleware는 요청이 캐시에 도달하기 전 엣지 서버에서 코드를 실행하여 리다이렉트, 리라이트, 헤더 수정을 가능하게 합니다. 이를 통해 클라이언트 측의 레이아웃 시프트 없이 A/B 테스트와 지리적 위치 기반 개인화를 구현하며 웹 성능을 극대화합니다.

Vercel은 새로운 프로젝트에 대해 기존 Edge Functions 대신 Node.js 런타임을 사용하는 Vercel Functions 사용을 권장하며, 요청 시 라우팅을 위해 Routing Middleware 활용을 제안합니다. 또한 Hydrogen 프로젝트를 자동으로 감지하고 최적화하는 기능을 도입하여 개발자 경험과 성능을 동시에 개선하고자 합니다.

Vercel이 Build Output API를 정식 출시하여 커스텀 프레임워크도 Vercel의 강력한 인프라 기능을 활용할 수 있도록 지원합니다. 이를 통해 개발자는 로컬이나 자체 CI 환경에서 빌드된 결과물을 소스 코드 전송 없이 직접 배포할 수 있습니다.

Vercel이 프레임워크에 관계없이 Edge Functions, ISR 등 강력한 인프라 기능을 사용할 수 있게 하는 'Build Output API'를 도입했습니다. 이를 통해 개발자는 소스 코드 노출 없이 사전 빌드된 결과물을 직접 배포할 수 있으며, 다양한 오픈소스 프레임워크의 생태계 확장이 가능해집니다.

Vercel의 Build Output API를 사용하여 정적 파일 생성, ISR, 서버 사이드 렌더링(SSR), 이미지 최적화 기능을 갖춘 맞춤형 React 웹 프레임워크를 만드는 방법을 다룹니다. 개발자가 인프라의 강력한 기능을 직접 활용하여 고성능 웹 애플리케이션을 구현하는 구조적 접근법을 제시합니다.

Vercel Functions가 요청 시 방문자의 위치와 시간대 데이터를 담은 강화된 HTTP 헤더를 제공하기 시작했습니다. 별도의 코드 수정이나 구성 변경 없이 모든 플랜에 즉시 적용되어, 서버 측에서 정교한 지역 기반 로직을 처리할 수 있습니다.

Google이 사용자 경험 측정 지표를 FID에서 INP로 교체함에 따라, 웹 페이지의 상호작용 반응 속도 최적화가 중요해졌습니다. React 18의 Suspense 기능을 활용한 선택적 하이드레이션은 메인 스레드의 차단을 방지하여 INP와 TBT 등 주요 성능 지표를 효과적으로 개선할 수 있습니다.

Vercel 엔지니어링 팀은 대시보드의 성능을 두 배 이상 향상시키기 위해 사용자가 가장 빈번하게 사용하는 '핫 패스(Hot Path)'를 식별하고 최적화했습니다. 자바스크립트 실행 효율화, 캐싱 활용, 컴포넌트 지연 로딩 등의 전략을 통해 핵심 웹 지표(Core Web Vitals)와 Lighthouse 점수를 대폭 개선하는 성과를 거두었습니다.

Vercel CLI v28은 Edge Functions 대신 Node.js 기반의 Vercel Functions 사용을 권장하며, Git 메타데이터 포함 및 개발 환경 개선을 통해 배포 프로세스를 최적화했습니다. 또한 Node.js 12 지원 종료와 함께 명령어 체계의 일부 변경이 포함되었습니다.

Vercel Edge Functions가 WebAssembly를 지원함에 따라 개발자는 Rust, Go, C 등의 언어로 작성된 기존 라이브러리를 엣지 환경에서 그대로 활용할 수 있습니다. 이를 통해 비트 연산이나 이미지 처리와 같은 고부하 작업의 성능을 JavaScript 대비 최대 2~3배까지 향상시킬 수 있습니다.

Integral Studio는 Vercel과 Next.js를 활용해 SZA, Travis Scott 등 세계적인 아티스트들을 위한 고성능 디지털 경험을 구축해 왔습니다. 이들은 에이전시 모델을 넘어, 독립 아티스트들을 위한 음악 마케팅 플랫폼인 SymphonyOS를 출시하며 기술을 통해 크리에이터 경제의 진입 장점과 확장성을 혁신하고 있습니다.

Vercel은 2022년 10월 25일 제3회 Next.js Conf 개최를 발표하며, 프레임워크의 대규모 업데이트와 새로운 로고를 공개할 예정이라고 밝혔습니다. 이번 컨퍼런스는 더 나은 개발 경험과 빠른 확장을 위한 도구들을 중심으로 진행됩니다.

이 기사는 Next.js와 Vercel의 Edge Middleware를 사용하여 클라이언트 사이드 레이아웃 시프트 문제를 해결하고 효율적인 A/B 테스트를 수행하는 사례를 다룹니다. Vercel은 템플릿 페이지 리디자인 과정에서 에지 단의 리라이트(Rewrite) 기능을 통해 사용자 경험을 해치지 않으면서 단계별 배포 전략을 성공적으로 실행했습니다.

Vercel Analytics의 차트가 데이터 포인트 간의 단순 연결 방식에서 벗어나 곡선 피적(Curve Fitting)을 활용한 부드러운 곡선 형태로 개선되었습니다. 이를 통해 노이즈를 제거하고 데이터의 전체적인 흐름을 더 정확하게 반영하여, 사용자가 왜곡 없는 트렌드와 변화율을 파악할 수 있도록 돕습니다.

Vercel이 다양한 애플리케이션 유형을 한눈에 확인하고 쉽게 시작할 수 있는 '템플릿 마켓플레이스'를 공식 출시했습니다. 이번 업데이트에는 검색 편의성을 높이기 위한 퍼지 검색(fuzzy search)과 필터 기능이 추가되었으며, Next.js와 Tailwind CSS 등 검증된 기술 스택 기반의 템플릿을 제공합니다.

개발자 Benjamin Td는 Next.js와 Vercel, Supabase를 활용해 유럽 기차 노선 시각화 서비스인 Chronotrains를 구축했습니다. 이 프로젝트는 Edge Network 캐싱과 ISR 기술을 통해 급격한 트래픽 증가에도 안정적인 성능을 유지하며 전 세계적인 사회적 담론을 형성하는 데 성공했습니다.

Next.js 12.3은 환경 변수 변경 시 Fast Refresh를 지원하고 이미지 최적화 기능을 강화했습니다. Vercel은 이러한 프레임워크 기능을 확장하여 클라우드 기반의 보안 관리, 전 세계 에지 네트워크를 통한 이미지 캐싱 및 자동 최적화를 제공함으로써 개발자 경험과 서비스 성능을 동시에 개선합니다.