Read Original
#Frontend

App Router의 장점은 우리에게도 장점일까요?

App Router의 장점은 우리에게도 장점일까요?
01

Summary

토스뱅크는 왜 Next.js App Router 도입을 과감히 포기했을까?

무조건적인 트렌드 추종 대신, 실제 런타임 환경과 운영 비용을 냉정하게 저울질한 기술 의사결정의 기록

모든 프로젝트에 App Router가 정답은 아닙니다. 토스뱅크 프론트엔드 팀이 실제 앱 내부 웹뷰 환경에서 Next.js App Router와 RSC를 다각도로 검증하며 마주한 WebKit의 렌더링 지연 현상, 라우터 블룸 필터 매칭 버그, 로깅 API 누락 등의 한계점과 최종적으로 Pages Router 유지를 선택하게 된 현실적이고 깊이 있는 기술적 이유를 공개합니다.

  • 01iOS WebKit 엔진에서 스트리밍 API가 첫 화면 렌더링(FCP)을 5초 이상 지연시키는 현상을 눈에 보이지 않는 SVG 요소를 추가해 103ms로 우회 단축함
  • 02스켈레톤 UI와 실제 콘텐츠의 높이 차이로 인한 레이아웃 흔들림(CLS) 문제를 분석하여 레이아웃 이동값을 0.138에서 0.036으로 개선함
  • 03점진적 마이그레이션 도중 Next.js의 블룸 필터 오판정 처리 로직과 basePath 결합 버그가 겹쳐 사용자에게 404 화면을 보여주는 치명적 라우팅 오류를 추적함
  • 04기존 Pages Router와 달리 실제 경로 주소만 제공하는 usePathname()의 한계로 인해 화면 패턴 단위의 유저 로깅 처리가 불가능한 문제를 확인하고 대안의 한계를 분석함
  • 05package.json의 조건부 export 설정을 이용해 개발자가 신경 쓰지 않아도 서버와 브라우저 환경에 맞게 인증 정보 처리를 다르게 수행하는 단순화 아키텍처를 고안함

RECOMMENDATION

신기술 프레임워크 도입 전, 타겟 사용자의 실제 브라우저 엔진(WebKit/Chromium)에서의 동작 성능과 패키지 간의 환경 호환성, 그리고 인프라 수준의 모니터링 기능(로깅 등)이 완전하게 지원되는지 밀착 검증하는 PoC 절차를 강력히 권장합니다.

The Problem

Next.js Pages Router가 유지보수 모드로 전환됨에 따라 신규 기능 도입을 위해 App Router 및 React Server Components(RSC)로의 전환을 검토하였으나, 토스 앱 내의 웹뷰 구동 환경 및 점진적 이관 과정에서 여러 기술적 제약 사항을 발견했습니다.

The Solution

실제 서비스를 App Router로 마이그레이션하는 파일럿 프로젝트를 진행하면서, iOS WebKit에서의 FCP 지연 이슈 해결을 위한 SVG 우회 기법 도입, 스켈레톤 높이 최적화를 통한 레이아웃 시프트 제어, package.json의 조건부 export를 이용한 환경별 분기 처리 등을 적용하며 깊이 있게 검증했습니다.

The Result

점진적 이관 중 발생하는 중대한 라우팅 버그(basePath 중복 결합으로 인한 404 에러)와 집계 목적의 경로 패턴 조회(usePathname의 한계) 등 치명적인 제약 사항이 해결되지 않아 최종적으로 App Router 도입을 취소하고 Pages Router를 유지하기로 결정했습니다.

Trade-off

Pages Router를 계속 유지함에 따라 최신 Next.js 프레임워크가 제공하는 자동 번들 최적화 및 서버 사이드 최신 기능 혜택을 즉각적으로 누리기 어려우며, 장기적으로 기술 부채가 누적될 위험이 있습니다.

03

Key Concepts

Concept · 01

React Server Components (RSC)

서버 환경에서 직접 렌더링을 수행하여 클라이언트 브라우저로 전송되는 자바스크립트 번들 용량을 획기적으로 낮출 수 있는 새로운 리액트 컴포넌트 모델입니다.

  • 서버 전용 의존성 라이브러리를 클라이언트 번들에서 완전 제외하여 초기 로딩 성능 개선 효과를 기대하고 도입을 검토함
  • 클라이언트 컴포넌트 환경과의 명확한 경계 구분이 필요하며 앱 브릿지나 특정 브라우저 API 호출 시 주의가 필요함을 확인함
Concept · 02

Suspense & HTML Streaming

데이터가 준비되는 컴포넌트 영역부터 클라이언트로 실시간 전송하여 사용자에게 빠른 초기 인식을 제공하는 Next.js의 핵심 렌더링 메커니즘입니다.

  • 데이터 패칭이 끝난 컴포넌트 순서대로 화면을 점진적으로 그리기 위해 사용함
  • 안드로이드 Chromium과 달리 iOS WebKit 브라우저 엔진에서는 특정 임계값을 넘을 때까지 첫 표시를 유보하는 호환성 한계를 경험함
Concept · 03

Bloom Filter (블룸 필터)

특정 원소가 집합 내에 포함되어 있는지 빠르고 효율적으로 판별할 수 있도록 도와주는 확률적 자료구조입니다.

  • Next.js 클라이언트 라우터가 이동하려는 주소가 App Router 페이지인지 Pages Router 페이지인지 식별하는 판단 로직에 적용됨
  • 동적 경로 판단 오판 시 백업하는 과정에서 basePath가 두 번 더해져 유저에게 404 오류를 뿜는 치명적인 호환성 버그 분석에 사용됨