피드로 돌아가기
Dev.toFrontend
원문 읽기
JS 번들 60% 감소 및 LCP 1.1s 달성한 App Router 마이그레이션
Next.js App Router: The Guide I Wish I Had When I Migrated from Pages Router
AI 요약
Context
Pages Router의 모든 컴포넌트 Client-side 렌더링 구조로 인한 JS 번들 비대화 발생. 데이터 페칭 로직의 명시적 분리로 인해 복잡한 상태 관리 및 렌더링 최적화에 한계 노출.
Technical Solution
- Server Components 기본 채택을 통한 Client-side JS 전송량 최소화 설계
- 'use client' 지시어를 통한 Interactivity 필요 지점의 명시적 분리 및 최적화
- Nested Layouts 도입으로 페이지 전환 시 공통 UI의 Unmounting 방지 및 렌더링 효율 개선
- async/await 기반의 컴포넌트 내 직접 데이터 페칭으로 getServerSideProps 등의 복잡한 추상화 제거
- Tag-based Revalidation 및 cache: 'no-store' 옵션을 통한 데이터 신선도 제어 전략 수립
- Streaming 및 Suspense 적용으로 서버 연산 완료 전 부분적 UI 전송을 통한 사용자 체감 속도 개선
실천 포인트
- Root Layout부터 시작하여 정적 페이지, 데이터 페칭 페이지, 인증 순으로 점진적 마이그레이션 수행 - 브라우저 API 및 React Hook 사용 여부에 따라 Client Component 범위를 최소 단위로 쪼개어 정의 - fetch API의 cache 옵션과 revalidateTag를 조합하여 데이터 업데이트 전략 최적화 - 보안을 위해 서버 전용 환경 변수와 NEXT_PUBLIC_ 변수를 엄격히 구분하여 사용