조금만 신경써서 초기 렌더링 빠르게 하기 (feat. JAM Stack)

SPA 개발에서 초기 렌더링 속도는 사용자 경험에 직결되는 중요한 문제입니다. 본 글은 번들 사이즈 증가와 렌더링 시점 지연이라는 두 가지 주요 과제를 해결하기 위한 접근 방식을 제시합니다.

번들 사이즈 최적화를 위해 코드 스플리팅과 트리 쉐이킹을 언급하지만, 근본적인 해결책은 렌더링 시점을 앞당기는 데 있습니다. 이를 위해 JAM Stack 아키텍처를 활용하여 SSR 없이도 초기 렌더링 속도를 개선한 경험을 공유합니다.

JAM Stack은 JavaScript, HTML, CSS 정적 리소스를 CDN에 배포하여 서버 관리를 최소화하며, 토스페이먼츠에서는 AWS S3, CloudFront, Lambda@edge를 사용하여 이를 구현했습니다. 이를 통해 사용자는 더 빠르게 콘텐츠를 볼 수 있게 되어 LCP 지표 개선에 기여합니다.