문서
조금만 신경써서 초기 렌더링 빠르게 하기 (feat. JAM Stack)
한재엽 · 토스 · 토스 기술 블로그
소개
SPA(Single Page Application) 구조로 웹 프론트엔드 애플리케이션이 개발되면서 초기 렌더링 속도는 프런트엔드 개발자에게 중요한 과제 중 하나가 되었습니다. 사용자 경험에 영향을 줄 수 있는 가장 큰 요소 중 하나가 바로 속도이기 때문입니다.
AI 핵심 요약
SPA의 번들 크기를 줄이는 것만으로는 빈 HTML이 스크립트 실행을 기다리는 초기 렌더링 지연을 해결하기 어려워, 토스페이먼츠는 SSR 없이 Next.js의 SSG로 초기 화면을 미리 생성했다. Web Vitals를 기준으로 측정한 결과, FP부터 LCP까지의 시간이 484ms에서 0ms로 줄었다. 다만 페이지 전체를 Suspense로 감싸면 빌드 시점에 fallback만 렌더링될 수 있어, 비동기 경계를 필요한 컴포넌트 단위로 좁히고 fallback을 실제 화면과 비슷하게 구성했다. 초기 로딩을 개선하려면 API 호출을 데이터가 필요한 곳 가까이에 두고, 로딩 중 화면도 제품 경험의 일부로 설계해야 한다.
- 번들 최적화만으로는 빈 index.html이 스크립트 실행을 기다리는 시간을 줄이는 데 한계가 있다.
- SSG는 인증이 필요 없는 데이터와 정적 영역을 빌드 시점에 HTML로 만들어 초기 화면에 담을 수 있다.
- 페이지 전체를 Suspense로 감싸면 SSG 결과가 로딩 화면에 그칠 수 있으므로 비동기 경계를 필요한 컴포넌트 주변으로 좁힌다.
- API 응답을 기다리는 동안의 fallback도 최종 화면과 구조적으로 비슷하게 설계하면 미리 렌더링할 수 있는 영역이 늘어난다.
- 서로 독립적인 API 호출은 데이터가 필요한 컴포넌트 가까이 배치해 한 응답이 다른 영역의 렌더링을 막지 않게 한다.
