레일웨이, Next.js 탈출로 빌드 시간 80% 단축...10분 빌드에서 2분으로 개선, 무중단 마이그레이션 성공

[한국정보기술신문] 클라우드 애플리케이션 배포 플랫폼 레일웨이(Railway)가 프론트엔드 프레임워크를 Next.js에서 Vite 기반 스택으로 전환해 빌드 시간을 80% 이상 단축하는 성과를 거뒀다고 발표했다. 10분을 넘나들던 빌드가 2분 이내로 줄어들며 개발 생산성이 크게 향상됐다.

레일웨이는 대시보드, 캔버스, 메인 웹사이트를 포함한 모든 프로덕션 프론트엔드에서 Next.js 페이지 라우터를 사용해왔다. 하지만 빌드 시간이 10분을 초과하기 시작했고, 이 중 6분이 Next.js 자체 처리에 소요됐다.

특히 빌드의 절반 시간이 '페이지 최적화 마무리' 단계에서 멈춰있는 상황이 반복됐다. 페이지 라우터의 제한적인 레이아웃 지원으로 인한 커스텀 추상화 과부하도 문제가 됐다.

회사 측은 "대시보드는 풍부하고 상태 중심적인 인터페이스이며, 캔버스는 실시간이고 웹소켓이 곳곳에 있다"며 "서버 우선 설계인 Next.js와 클라이언트 중심의 실시간 애플리케이션 요구사항 간 미스매치가 컸다"고 설명했다.

레일웨이는 Vite, TanStack 라우터, Nitro로 구성된 새로운 스택으로 마이그레이션했다. 놀랍게도 단 2개의 풀 리퀘스트만으로 200개 이상의 라우트를 무중단으로 전환하는 데 성공했다.

첫 번째 PR에서는 next/image, next/head, next/router 등 Next.js 종속성을 제거하고 네이티브 브라우저 API로 대체했다. 두 번째 PR에서는 전체 프레임워크 교체와 Nitro 서버 레이어 추가, 500개 이상의 리다이렉트와 보안 헤더 통합을 진행했다.

새로운 아키텍처는 빌드 시간 단축뿐만 아니라 전반적인 개발 경험을 혁신했다. 개발 서버는 이제 즉시 시작되며 시작 지연이 전혀 없다. 타입 안전한 라우팅과 파일시스템 기반 생성, 우회책 없는 퍼스트 클래스 레이아웃 구성이 가능해졌다.

인프라 측면에서도 최적화가 이뤄졌다. Fastly 엣지 캐싱이 대부분의 트래픽을 처리하며, 콘텐츠 해시 청크를 통한 세밀한 캐시 무효화가 가능하다. 기존 사용자는 메가바이트 대신 킬로바이트만 다운로드하면 되는 환경이 구축됐다.

마이그레이션 과정에서 일부 트레이드오프는 감수해야 했다. 내장 이미지 최적화는 Fastly 엣지 최적화로 대체했고, 에코시스템 도구들은 자체 개발한 동등한 솔루션으로 교체했다.

성숙도 우려에 대해서는 Vite와 TanStack 모두를 후원하는 방식으로 대응했다. 이를 통해 오픈소스 생태계에 기여하면서도 필요한 기능과 안정성을 확보했다.

레일웨이의 선택은 특히 실시간 상호작용이 중요한 애플리케이션에서 클라이언트 우선 아키텍처의 중요성을 보여준다. 웹소켓 기반 실시간 기능과 상태 관리가 핵심인 서비스에서는 서버 사이드 렌더링보다 클라이언트 사이드 최적화가 더 적합할 수 있음을 입증했다.

이번 마이그레이션은 단순한 기술 전환을 넘어 애플리케이션 특성에 맞는 아키텍처 선택의 중요성을 강조한다. 특히 개발 팀의 생산성과 사용자 경험을 동시에 개선할 수 있는 기술 결정의 사례로 평가받고 있다.