유럽 기차 노선 시각화 앱 Chronotrains의 바이럴 트래픽 대응 아키텍처

유럽 역에서 5시간 내 기차로 갈 수 있는 지역을 인터랙티브 지도로 보여주는 Chronotrains가 Hacker News 1위에 오르며 100만 뷰를 기록했다. 개발자가 휴가 중에도 무중단으로 버텼는데, 엣지 캐싱 + 이동 시간 사전 계산 + ISR 세 가지 전략이 핵심이었다.

핵심 포인트

API Routes를 Vercel Functions로 배포 후 엣지 네트워크 캐시로 호버마다 발생하는 PostgreSQL 조회를 흡수
기차역 간 이동 시간(1~5시간)을 스크립트로 사전 계산해 PostgreSQL에 저장, 실시간 경로 탐색 없음
ISR(Incremental Static Regeneration)로 DB 요청을 역당 일 1회 수준으로 제한
수백만 트래픽에도 개발자 휴가 중 무중단 운영

상세 정리

서비스 개요: 마우스가 유럽 기차역에 닿으면 해당 역에서 5시간 내에 갈 수 있는 지역(isochrone)을 지도에 표시. 각 호버마다 기하학 데이터 API 요청 발생.
바이럴 트래픽: 출시 후 개발자가 휴가를 떠났는데 Hacker News 1위 + Twitter 트렌드로 100만 뷰 이상 발생. 인프라는 무중단 유지.
핵심 전략 1 — 엣지 캐싱: API Routes를 Vercel Functions로 배포하고 isochrone 결과를 Vercel 엣지 네트워크에 캐시. 같은 역을 여러 사용자가 호버할 때 PostgreSQL 조회 없이 캐시에서 응답.
핵심 전략 2 — 사전 계산: 모든 역 간 이동 시간(1~5시간 단위)을 스크립트로 미리 계산해 PostgreSQL에 저장. 실시간 경로 탐색 없이 DB 조회만으로 isochrone 반환.
핵심 전략 3 — ISR: Incremental Static Regeneration으로 페이지를 정적 생성하고 일정 시간 후 백그라운드 재생성. DB 요청을 역당 하루 약 1회로 제한해 DB 부하를 제어.
스택: Next.js(프레임워크), Vercel(호스팅 + Functions), PostgreSQL via Supabase(데이터), Vercel Functions(API Routes).
오픈소스: 전체 코드가 GitHub에 공개돼 있어 구현 세부를 확인 가능.

왜 읽나사전 계산 + 엣지 캐싱 + ISR 조합으로 지리 데이터 기반 대용량 트래픽을 효율적으로 처리하는 아키텍처를 실제 바이럴 케이스로 확인하고 싶은 웹 개발자에게 유용.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

유럽 기차 노선 시각화 앱 Chronotrains의 바이럴 트래픽 대응 아키텍처

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다