반응형
app router 최적화
-
Next.js App Router(5) - 성능 최적화, 실전 팁Next.js 2025. 7. 2. 10:09
Next.js App Router 드디어 마지막 편인 성능 최적화와 실전 팁입니다.이번 편에서는 이전 편들의 총집 편이며, 실전적으로 바로 활용할 수 있는 방법들을 모아 봤습니다.1. 서버 우선 아키텍처 설계 설계: 번들 최소화를 위한 근본 접근 모든 UI는 기본적으로 Server Component로 구현하여 JS 번들에서 제외, 클라이언트 렌더링 부하 제거클라이언트 코드가 꼭 필요할 때만, 그리고 작은 단위로 분리해 use client 선언Next.js의 자동 코드 분할 덕분에 페이지 단위 JS 추출이 기본 제공2. 코드 분할 & lazy loading: 다음 단계 지연 로딩 next/dynamic과 React.lazy + Suspense 조합으로 대형 UI(모달, 차트 등)는 사용 시점에 로딩SSR ..