Next.js

Next.js App Router(5) - 성능 최적화, 실전 팁

Kir93 2025. 7. 2. 10:09
728x90
반응형

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 점수에서 현격한 개선을 느낄 수 있을 것입니다.

 

반응형
저작자표시 (새창열림)