-
Next.js App Router(5) - 성능 최적화, 실전 팁Next.js 2025. 7. 2. 10:09728x90반응형
Next.js App Router 드디어 마지막 편인 성능 최적화와 실전 팁입니다.
이번 편에서는 이전 편들의 총집 편이며, 실전적으로 바로 활용할 수 있는 방법들을 모아 봤습니다.
1. 서버 우선 아키텍처 설계 설계: 번들 최소화를 위한 근본 접근
- 모든 UI는 기본적으로 Server Component로 구현하여 JS 번들에서 제외, 클라이언트 렌더링 부하 제거
- 클라이언트 코드가 꼭 필요할 때만, 그리고 작은 단위로 분리해 use client 선언
- Next.js의 자동 코드 분할 덕분에 페이지 단위 JS 추출이 기본 제공
2. 코드 분할 & lazy loading: 다음 단계 지연 로딩
- next/dynamic과 React.lazy + Suspense 조합으로 대형 UI(모달, 차트 등)는 사용 시점에 로딩
- SSR 불필요한 Client Component엔 ssr: false 옵션 적용하거나, use client 내부에서만 로드
- 외부 라이브러리도 dynamic import로 로딩 타이밍 제어, useRef에 캐싱해 중복 로드 방지
import dynamic from 'next/dynamic'; const HeavyChart = dynamic(() => import('../components/Chart'), { ssr: false, loading: () => <Spinner /> }); export default function Dashboard() { return <HeavyChart />; }3. 중복 패칭 방지 & fetch 위치 조절
- 서버컴포넌트에서 데이터 패칭을 한 번만—layout에서 공통(fetch user/session 등) 처리
- 반복적인 fetch는 Next.js의 fetch 캐싱 덕에 동일 요청 자동 메모이제이션
- React context 대신 page 전역에서 캐시 된 data prop 전달로 client 컴포넌트 라이프사이클 간소화
// layout.js export default async function RootLayout() { const user = await fetch('/api/user', { cache: 'force-cache' }).then((res) => res.json()); return ( <html> <body> <Providers user={user}>{children}</Providers> </body> </html> ); }4. 이미지·폰트·prefetch 최적화
- <Image> 기본 lazy-load + WebP/AVIF 최적화 + priority로 LCP 이미지 우선 로딩
- next/font 로컬 CSS 사용으로 FOUT 최소화, <Link prefetch />를 통한 사용자 예측 경로 선로딩
- 외부 script는 next/script로 lazyOnload/afterInteractive 등 로딩 전략 지정
import Image from 'next/image'; import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], preload: true }); export default function Page() { return ( <main className={inter.className}> <Image src="/hero.jpg" width={1200} height={600} priority alt="hero"/> <Link href="/blog" prefetch>블로그 보기</Link> </main> ); }5. 측정과 개선 루프
- Web Vitals, Lighthouse, React Profiler, Vercel Analytics 활용해 FCP, LCP, TTI, CLS 등 핵심 지표 분석
- 번들 크기 확인은 @next/bundle-analyzer로 시각화, 대형 dependency 정리
6. App Router 최적화 체크리스트
전략 핵심 포인트 서버 우선 아키텍처 Server Component 기본, Client 최소화 코드 분할 next/dynamic, React.lazy, 외부 모듈 import() 데이터 패칭 layout에서 공통 fetch, 캐싱 활용 미디어 최적화 <Image>, <Link prefetch>, next/font, <Script> 전략 모니터링 Vitals + Profiler + Analytics + Bundle Analyzer 7. 실전 팁
- 초기 번들경량화: 불필요한 polyfill, 무거운 UI library lazy-loading 경량화.
- 지능형 hydration 전략: 이미지나 중요도 낮은 컴포넌트는 Intersection Observer 기반 lazy hydration 최적화.
- 선제 prefetch: hover, viewport 진입, 주요 link에 prefetch 적용해 UX 개선을 통한 체감 속도 향상.
위 내용을 처리한다면 실제 체감 속도나 Google Core Web Vitals 점수에서 현격한 개선을 느낄 수 있을 것입니다.
반응형'Next.js' 카테고리의 다른 글
Next.js App Router(4) - 데이터 패칭 전략 (1) 2025.06.30 Next.js App Router(3) - 폴더 구조와 파일 역할 (1) 2025.06.27 Next.js App Router(2) - 서버 vs 클라이언트 컴포넌트 (0) 2025.06.25 Next.js App Router(1) - Next.js의 새로운 패러다임 이해하기 (1) 2025.06.23 Next.js App Router Server Components와 Server Actions 알아보기 Part.3(Feat. react-hook-form, zod, react-query) (0) 2025.04.12