문제
문제 상황
Next.js 앱의 첫 바이트 응답 시간(TTFB)이 350ms를 넘어 사용자 이탈률이 높았습니다. 서버 컴포넌트에서 불필요한 순차 데이터 패칭이 발생하고 있었고, 캐시 전략이 전혀 없었습니다.
접근
접근 방법
데이터 패칭을 병렬화하고, 변경 빈도에 따라 캐시 레이어를 분리했습니다. 크리티컬 패스의 컴포넌트 렌더링 순서를 재조정해 사용자가 먼저 볼 콘텐츠를 우선 스트리밍하도록 했습니다.
결과
성과
TTFB가 350ms에서 40ms로 줄었고, Core Web Vitals LCP가 Good 구간에 진입했습니다. 캐시 적중률은 78%에서 94%로 향상됐습니다.
- TTFB 350ms -> 40ms (8.75배 개선)
- LCP Core Web Vitals Good 구간 달성
- 캐시 적중률 78% -> 94%
- 병렬 데이터 패칭 및 스트리밍 렌더링 적용