Vercel Ship 2025: Vercel's framework-defined approach to caching (Luba Kravchenko)
- Vercel은 CDN을 넘어선 '프레임워크 정의 인프라(Framework Defined Infrastructure)'를 통해 웹사이트 속도를 최적화하며, 개발자가 인프라 복잡성 대신 코드에 집중하게 합니다. 🚀
- 프레임워크 정의 인프라는 클라우드 기본 요소를 추상화하여 개발자가 선택한 프레임워크(예: Next.js)의 의도에 따라 인프라가 자동으로 작동하게 합니다. 🏗️
- Vercel은 캐싱 접근 방식에서 '마법 같은' 숨겨진 복잡성 대신, 직관적이고 투명한 단순함을 제공하는 방향으로 개선했습니다. ✨
- 정적 렌더링은 빌드 시 콘텐츠를 생성하여 모든 사용자에게 동일하게 제공하고, 동적 렌더링은 요청 시 사용자별 맞춤 콘텐츠를 생성합니다. 🔄
- 캐싱은 크게 정적 페이지 및 함수 응답을 위한 '응답 캐싱'과 외부 API 데이터를 위한 '데이터 캐싱'으로 나뉩니다. 💾
- 데이터 캐싱은 Vercel 함수 실행 중 외부 API 데이터를 캐시하여 느린 백엔드 호출을 줄이고 성능을 향상시킵니다. 📊
- Next.js 15부터 데이터 캐싱은 기본값이 아닌 명시적 옵트인 방식으로 변경되어,
force-cache, revalidate, unstable_cache, use cache 디렉티브를 통해 세밀한 제어가 가능합니다. ✅
- ISR(Incremental Static Regeneration)은 정적 사이트의 성능과 동적 콘텐츠의 유연성을 결합하여 빠르고, 오류가 적으며, 전역적으로 일관된 콘텐츠 제공을 목표로 합니다. ⚡
- ISR은
revalidatePath, generateStaticParams, 시간 기반 재검증, 태그 재검증 등 다양한 프레임워크 지시어를 통해 콘텐츠를 최신 상태로 유지합니다. 🏷️
- Next.js의 새로운
use cache 디렉티브는 캐시 태깅을 직접 제어할 수 있는 API를 제공하여 개발자가 캐싱 전략을 더욱 정교하게 관리할 수 있게 합니다. 🎯
- Vercel의 제로 설정 CDN은 개발자의 코드에서 캐싱 동작을 자동으로 추론하여 수동으로 캐시 제어 헤더를 설정할 필요 없이 최적의 성능을 제공합니다. ⚙️
- ISR은 사전 렌더링을 통한 빠른 초기 로드, 전역 일관성, 그리고 최대 31일간의 내구성(백엔드 오류 시에도 오래된 콘텐츠 제공)을 보장합니다. 🛡️
- Vercel은 CDN 캐시 읽기(자주 액세스하는 콘텐츠)와 오리진 캐시 읽기(ISR 페이지 콘텐츠)를 구분하여 비용 효율적인 캐싱 전략을 제공합니다. 💰
- 지역 인식 ISR(Region-aware ISR)은 사용자와 가까운 Vercel 오리진 리전에서 ISR 콘텐츠를 제공하여 국제적인 요청 지연을 줄이고 성능을 최적화합니다. 🌍
- Vercel의 관측성(Observability) 도구를 통해 데이터 캐시 사용량, 재검증 내역, 저장된 콘텐츠를 시각적으로 확인하고 분석할 수 있습니다. 🔭