App Router의 장점은 우리에게도 장점일까요?
이다용 토스 · 토스 기술 블로그
AI 핵심 요약
토스뱅크는 Pages Router의 유지보수 모드에 대비해 App Router와 RSC를 검토하고, 실제 웹뷰에서 스트리밍 렌더링과 레이아웃 이동을 측정했습니다. 스켈레톤 높이를 조정해 화면 흔들림을 줄일 수 있었지만, 섹션별 로딩 UI를 계속 관리해야 했고 WebKit의 초기 표시 지연도 확인했습니다. RSC에서는 조건부 export로 서버·클라이언트 API 구현을 나누는 방식이 데이터 요청 코드를 단순화했지만, 컴포넌트 경계와 공통 패키지, 사용자별 캐시를 새로 관리해야 했습니다. 점진적 전환 중 `basePath`와 라우터 동작 문제, 기존 로깅 기능의 공백까지 고려한 끝에 얻는 이득보다 전환·운영 비용이 크다고 판단해 Pages Router를 유지하기로 했습니다.
- 스트리밍 렌더링은 브라우저 엔진별 동작을 확인하고, 실제 웹뷰 환경에서 측정해야 합니다.
- 세로로 쌓인 화면에서는 스켈레톤과 콘텐츠의 높이 차이가 레이아웃 이동을 일으키므로 로딩 UI를 함께 설계해야 합니다.
- 조건부 export의 `react-server` 분기로 서버·클라이언트 구현을 나누면 호출부를 공통으로 유지할 수 있습니다.
- RSC 캐시를 요청 간 공유할 때 사용자별 응답이 섞이지 않도록 캐시 키에 사용자 구분을 포함해야 합니다.
- 점진적 마이그레이션도 `basePath`와 라우터 간 이동처럼 병행 기간에만 생기는 경로 문제를 만들 수 있습니다.
소개
App Router가 토스뱅크에도 좋은 선택일지, 직접 측정한 결과와 도입 여부를 판단한 기준을 공유해요.
비슷한 학습 자료
문서 강현구
Transpiler, “사용”말고 “활용”하기
문서 토스 TNS 길드
토스가 특허 낸 리서치툴, TNS (Toss Navigation Score) 제작기
문서 김서연
토스 UX 리서처는 어떤 방법론을 사용할까?
문서 오천석
모티베이션을 디자인하기
문서 이지윤