pile·
프론트엔드·vercel-blogVercel Blog·

GitBook이 30,000개 사이트에 준실시간 콘텐츠 업데이트를 제공하는 방법

GitBook이 30,000개 문서 사이트를 운영하며 월 1.2억 페이지뷰를 처리하는 멀티테넌트 캐싱 아키텍처를 공개했다. Next.js의 use cache 지시문과 태그 기반 선택적 무효화로 일일 40,000건의 캐시 무효화를 300ms 이하로 처리하고, 2025년 5배 급증한 AI 트래픽(전체의 41%)도 흡수하고 있다.

핵심 포인트
  • 30,000개 독립 문서 사이트, 월 1.2억 페이지뷰를 단일 Next.js 오픈소스 프론트엔드로 운영한다.
  • GitHub/GitLab 병합 이벤트를 신호로 태그 기반 선택적 캐시 무효화를 구현해 일일 40,000건을 300ms 이하로 처리한다.
  • 한 팀의 오타 수정이 나머지 29,999개 사이트의 캐시 재검증을 유발하지 않도록 콘텐츠 단위별 태깅으로 영향 범위를 최소화한다.
  • AI 트래픽이 2025년 전년 대비 5배 증가해 전체 페이지뷰의 41%를 차지하며 예측 불가능한 캐시 패턴을 만든다.
  • 목표는 "AI든 인간이든 거의 100% 캐시 히트율"이며, 적응형 문서(독자별 콘텐츠 변형)가 향후 새 도전 과제다.
상세 정리
  • 플랫폼 규모: 30,000개 독립 문서 사이트, 월 1.2억 페이지뷰, 일일 40,000건 캐시 무효화를 단일 Next.js 프론트엔드로 처리한다.
  • 핵심 캐싱 기술: Next.js의 use cache 지시문으로 함수 레벨 캐싱을 구현해 페이지 전체가 아닌 개별 데이터 소스 단위로 캐시를 제어한다.
  • 태그 기반 무효화: 각 캐시 항목에 콘텐츠 단위 태그를 부착하고, 병합 이벤트 발생 시 영향받은 태그만 선택적으로 재검증한다.
  • 멀티테넌트 격리 원칙: 한 팀의 문서 수정이 다른 29,999개 사이트의 캐시를 건드리지 않아야 한다는 요구사항이 태그 기반 방식의 핵심 동기다.
  • 광범위 무효화의 비효율: 사이트 전체 캐시 제거는 수만 개 테넌트 규모에서 파국적 재검증 폭탄이 된다. 이를 피하기 위해 merge 이벤트를 신뢰할 수 있는 무효화 신호로 사용한다.
  • 처리 성능: 일일 40,000건의 선택적 무효화를 300ms 이하로 완료해 사용자에게 준실시간 콘텐츠 업데이트를 제공한다.
  • AI 트래픽 현황: 2025년 LLM 크롤러·자동화 시스템 트래픽이 전년 대비 5배 증가해 전체의 41% 차지. 수백 개 사이트를 무작위로 순회해 인간보다 훨씬 예측 불가능한 캐시 패턴을 만든다.
  • 캐시 히트율 목표: AI 트래픽도 캐시에서 서빙해야 비용과 응답 속도를 모두 잡을 수 있다. 목표는 거의 100% 캐시 히트율이다.
  • 향후 과제: 독자별로 콘텐츠를 다르게 보여주는 적응형 문서가 도입되면 같은 URL이 사용자마다 다른 응답을 반환하게 되어 멀티테넌트 캐싱이 한층 복잡해질 것으로 예상한다.
왜 읽나멀티테넌트 SaaS의 캐시 무효화 전략, Next.js use cache 지시문 실전 활용법, AI 트래픽 급증 대응을 실제 30K 사이트 규모에서 배우려는 프론트엔드·인프라 엔지니어에게.
vercel-blog
Vercel Blog 블로그
원문은 여기서 이어서 읽을 수 있어요
원문 읽기
읽음 (0)

이 글과 비슷한

  1. 프론트엔드·LINE EngineeringLINE Engineering·

    AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기

    LINE Planet 팀의 PM과 Android 엔지니어 두 명이 웹 전문 엔지니어 없이 LINE 앱 내에서 그룹 영상 통화 서비스를 개발한 과정을 다룬다. LIFF(LINE Front-end Framework)와 LINE Planet SDK를 활용해 React/Vite 기반 웹 앱을 구성했고, Firebase Cloud Functions로 별도 서버 인프라 없이 구현을 완료했다.

    #react#webrtc#firebase+2
  2. 프론트엔드·vercel-blogVercel Blog·

    Vercel과 Shopify의 Hydrogen 전면 재설계

    Vercel과 Shopify가 Hydrogen을 오픈소스·런타임 무관 프레임워크로 전면 재설계했다. 기존 Hydrogen은 빠른 헤드리스 스토어프런트 배포를 지원했지만 플랫폼 종속성이 있었고, 새 버전은 Svelte, Nuxt, Next.js 등 어느 JavaScript 프레임워크에서도 동작한다. 3레이어 아키텍처(코어/클라이언트/서버)로 재구성하면서 각 레이어가 명확한 역할을 분담한다.

    #react#nextjs#i18n+2
  3. 프론트엔드·토스 SLASH토스 SLASH·

    es-toolkit: 사내 소형 라이브러리에서 글로벌 프로젝트로

    토스 프론트엔드 팀이 사내 공유 유틸리티 라이브러리를 발전시켜 만든 es-toolkit이 주간 npm 다운로드 2,000만 건을 넘기며 글로벌 오픈소스 프로젝트로 자리 잡은 과정을 다룬다. lodash의 구조적 한계를 넘어 현대 웹 개발 환경에 최적화된 유틸리티 라이브러리를 처음부터 설계한 경험을 정리한다.

    #lodash#open-source#tree-shaking+2