Next.js 성능 최적화 완벽 가이드 (초보도 이해하는)

Next.js 성능 최적화 완벽 가이드 (초보도 이해하는)

Next.js로 웹사이트를 만들었는데 로딩이 느리신가요? 사용자가 이탈하고 있나요? 성능 최적화는 사용자 경험과 SEO 모두에 직접적인 영향을 미칩니다. 이 글에서는 바이브 코더도 쉽게 따라할 수 있는 Next.js 성능 최적화 핵심 5가지를 알려드립니다. 이미지 최적화, 렌더링 전략, 코드 스플리팅, 스크립트 로딩, 캐싱까지 모두 다룹니다.

💡 이 글의 핵심 내용

• Next.js Image 컴포넌트로 이미지 용량 90% 줄이기
• 렌더링 전략 4가지 (CSR, SSR, SSG, ISR) 비교
• 코드 스플리팅으로 초기 로딩 시간 단축
• 외부 스크립트 최적화로 페이지 로딩 개선
• 캐싱 전략으로 서버 부하 줄이기

출처: 코드팩토리 유튜브 채널 "바이브 코더가 알아듣기 쉽게 최대한 얕게 떠봤습니다. 20분 컷 NextJS 최적화 강의"

Next.js 이미지 최적화로 로딩 속도 2배 빠르게

웹사이트가 느린 가장 큰 이유 중 하나가 바로 이미지입니다. 일반 HTML img 태그를 사용하면 어떤 문제가 생길까요?

❌ 일반 img 태그의 문제점

• 원본 사이즈 그대로 서빙 (2~3MB 이미지도 그대로)
• WebP 같은 최신 포맷 미지원
• 레이지 로딩 없음 (모든 이미지 한 번에 로드)
• CLS (레이아웃 이동) 발생으로 사용자 경험 저하

Next.js Image 컴포넌트는 이 모든 문제를 자동으로 해결해줍니다. 마치 자동 다이어트 기능이 있는 것처럼요.

✅ Next.js Image 컴포넌트의 장점

• 자동 사이즈 조절: 모바일은 640px, 데스크톱은 적절한 크기로
• WebP/AVIF 자동 변환: 브라우저가 지원하면 자동으로 최신 포맷 사용
• 레이지 로딩 기본: 화면에 보일 때만 이미지 로드
• CLS 방지: width/height 기반으로 레이아웃 미리 확보

외부 이미지를 사용한다면 next.config.js에서 도메인을 등록해야 합니다. 이건 보안을 위한 필수 설정이에요.

// next.config.js
module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com']
  }
}

💰 Vercel 이미지 최적화 비용

무료 플랜에서도 충분히 사용할 수 있습니다.

• 이미지 변환: 5,000건/월 무료
• 캐시 읽기: 30만건 무료
• 캐시 쓰기: 10만건 무료

캐시 시간을 늘려놓으면 비용을 크게 절감할 수 있어요.

Next.js 이미지 최적화는 요청이 들어오면 캐시를 먼저 확인하고, 없으면 버킷에서 가져와 Lambda에서 변환한 뒤 저장하는 방식으로 작동합니다. 첫 요청은 조금 느릴 수 있지만, 그 다음부터는 캐시에서 빠르게 제공됩니다.

Next.js 렌더링 전략 완벽 비교 (CSR vs SSR vs SSG vs ISR)

렌더링 전략이란 웹페이지를 언제, 어디서 만드는가의 문제입니다. 요리를 언제 어디서 하는지 선택하는 것과 비슷해요. 미리 만들어 둘까요? 주문이 들어올 때마다 만들까요? 각 전략마다 장단점이 있습니다.

⚠️ 중요한 팁

App Router를 사용 중이라면 그대로 유지하세요. Pages Router로 바꾸지 마세요. App Router가 최신이고 더 강력합니다.

1. CSR (Client-Side Rendering) - 브라우저에서 렌더링

브라우저가 JavaScript를 다운로드한 뒤 페이지를 만듭니다. SEO에는 불리하지만, 로그인이 필요한 관리자 페이지나 대시보드에 적합해요.

언제 사용하나요?

• 관리자 페이지
• 대시보드
• SEO가 필요 없는 페이지

2. SSR (Server-Side Rendering) - 매 요청마다 서버에서

사용자가 페이지를 요청할 때마다 서버가 HTML을 만들어 줍니다. 마치 서버가 미리 준비한 도시락을 바로 전달하는 것처럼요. SEO에 좋지만 서버 부하가 가장 높습니다.

언제 사용하나요?

• 실시간 데이터가 필요한 페이지
• 주식 시세, 뉴스 피드
• 사용자별로 다른 내용을 보여주는 페이지

3. SSG (Static Site Generation) - 빌드 시 미리 생성

배포할 때 미리 HTML을 만들어 둡니다. 서버 부하가 전혀 없고 가장 빠릅니다. 약관, 문서, 회사 소개처럼 변하지 않는 콘텐츠에 완벽해요.

언제 사용하나요?

• 약관, 개인정보처리방침
• 회사 소개 페이지
• 변하지 않는 문서

// generateStaticParams로 SSG 페이지 미리 생성
export async function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

4. ISR (Incremental Static Regeneration) - SSG + 주기적 갱신

SSG의 속도와 SSR의 최신 데이터를 동시에 잡는 전략입니다. 설정한 시간마다 페이지를 다시 생성해요. 블로그, 뉴스, 상품 상세 페이지에 최적입니다.

언제 사용하나요?

• 블로그 글
• 뉴스 기사
• 상품 상세 페이지 (가격/재고는 자주 변함)

// revalidate 값으로 ISR 적용
export const revalidate = 3600 // 1시간마다 재생성

🚧 PPR은 아직 실험적

PPR (Partial Prerendering)은 정적 부분과 동적 부분을 혼합하는 전략입니다. 하지만 아직 실험 단계라 바이브 코더는 사용하지 않는 걸 추천합니다.

서버 컴포넌트 vs 클라이언트 컴포넌트

Next.js 13 이상에서는 컴포넌트가 기본적으로 서버 컴포넌트입니다. 클라이언트 컴포넌트로 만들려면 'use client' 디렉티브를 파일 맨 위에 추가하세요.

⚠️ 주의

'use client'를 지운다고 바로 서버 컴포넌트가 되는 건 아닙니다. useState, useEffect 같은 클라이언트 훅을 제거해야 해요.

구분	서버 컴포넌트	클라이언트 컴포넌트
렌더링 위치	서버	브라우저
React 훅 사용	불가능	가능
이벤트 핸들러	불가능	가능
번들 크기	번들에 포함 안 됨	번들에 포함됨

Next.js 코드 스플리팅으로 초기 로딩 시간 단축

코드 스플리팅은 필요한 코드만 먼저 로드하는 기술입니다. 여행 갈 때 필요한 짐만 챙기는 것처럼요. 특히 텍스트 에디터나 차트 라이브러리처럼 무거운 라이브러리에 효과적입니다.

Next.js는 다이나믹 임포트를 통해 코드 스플리팅을 쉽게 구현할 수 있습니다.

❌ 나쁜 예: 일반 import

import HeavyChart from 'heavy-chart-library'
// 사용자가 차트를 보든 안 보든 무조건 로드됨

✅ 좋은 예: 다이나믹 import

const HeavyChart = dynamic(() => import('heavy-chart-library'))
// 실제로 차트가 필요할 때만 로드됨

💡 번들 애널라이저 사용하기

@next/bundle-analyzer를 설치하면 번들 크기를 시각적으로 확인할 수 있습니다. 어떤 라이브러리가 무거운지 한눈에 보여줘서 최적화 대상을 쉽게 찾을 수 있어요.

트리 쉐이킹은 사용하지 않는 코드를 자동으로 제거하는 기능입니다. lodash처럼 큰 라이브러리에서 필요한 함수만 import하면 나머지는 번들에 포함되지 않아요.

외부 스크립트 최적화로 페이지 로딩 개선

Google Analytics, Google Tag Manager 같은 외부 스크립트는 페이지 로딩을 방해할 수 있습니다. 하지만 이런 스크립트들은 사실 늦게 로드되어도 괜찮아요.

Next.js Script 컴포넌트를 사용하면 스크립트 로딩 시점을 제어할 수 있습니다.

✅ 좋은 예: Script 컴포넌트

<Script
  src="https://www.googletagmanager.com/gtag/js"
  strategy="afterInteractive"
/>
// 페이지 로드 후에 스크립트 로드

strategy 값	설명	적합한 사용처
beforeInteractive	페이지 로드 전	봇 탐지, 쿠키 동의
afterInteractive	페이지 로드 후	Google Analytics, GTM
lazyOnload	브라우저 유휴 시간	채팅 위젯, 소셜 공유

afterInteractive는 페이지가 로드되고 사용자가 상호작용할 수 있게 된 후에 스크립트를 로드합니다. 분석 도구처럼 즉시 필요하지 않은 스크립트에 완벽해요.

Next.js 캐싱으로 서버 부하 줄이기

캐싱은 자주 사용하는 데이터를 미리 저장해 두는 것입니다. 마치 자주 쓰는 물건을 책상 위에 두는 것처럼요. 같은 데이터를 여러 번 가져오는 비효율을 막을 수 있습니다.

Next.js에는 서버 사이드 캐싱(unstable_cache)과 클라이언트 사이드 캐싱(TanStack Query) 두 가지 방법이 있습니다.

서버 사이드 캐싱 (unstable_cache)

Layout과 Page에서 같은 함수를 호출할 때 유용합니다. 예를 들어 OG 이미지 데이터를 가져오는 함수를 두 곳에서 호출하면, 캐싱 없이는 DB에 두 번 접근하게 됩니다.

import { unstable_cache } from 'next/cache'

const getProduct = unstable_cache(
  async (id) => await db.product.findUnique({ where: { id } }),
  ['product'], // 캐시 키
  { revalidate: 3600, tags: ['products'] } // 1시간 유효
)

클라이언트 사이드 캐싱 (TanStack Query)

클라이언트 컴포넌트에서는 TanStack Query (구 React Query)를 사용합니다. 개념은 unstable_cache와 동일해요.

⚠️ 캐싱 적용 시 주의사항

캐싱을 어디에 적용했는지 반드시 메모해 두세요. 나중에 데이터가 업데이트되지 않으면 버그로 착각할 수 있습니다. 실제로는 캐시가 유효 기간 동안 이전 데이터를 보여주는 거예요.

Core Web Vitals로 성능 측정하기

최적화를 적용했다면 이제 측정할 차례입니다. Google의 Core Web Vitals는 사용자 경험을 측정하는 3가지 핵심 지표예요.

지표	의미	목표 값
LCP (Largest Contentful Paint)	페이지의 메인 콘텐츠가 로드되는 시간	2.5초 이하
FID (First Input Delay)	사용자가 처음 상호작용할 때의 응답 시간	100ms 이하
CLS (Cumulative Layout Shift)	예상치 못한 레이아웃 이동	0.1 이하

💡 측정 도구

• Google Lighthouse: Chrome 개발자 도구에서 바로 사용 가능
• PageSpeed Insights: 실제 사용자 데이터 기반 분석
• Vercel Analytics: Next.js 프로젝트에 최적화된 모니터링

최적화 전후를 비교하면서 점진적으로 개선하는 게 중요합니다. 한 번에 모든 걸 고치려고 하지 마세요.

마치며 - 지금 바로 적용하기

Next.js 성능 최적화는 어렵지 않습니다. 다음 5가지만 기억하세요.

📝 핵심 요약

1. Next.js Image 컴포넌트로 이미지 자동 최적화
2. 렌더링 전략을 페이지 특성에 맞게 선택 (CSR/SSR/SSG/ISR)
3. 다이나믹 임포트로 무거운 라이브러리 코드 스플리팅
4. Script 컴포넌트로 외부 스크립트 로딩 최적화
5. 캐싱으로 불필요한 데이터 요청 줄이기

성능 최적화는 점진적으로 적용하세요. 측정 → 최적화 → 측정 사이클을 반복하면서 개선해 나가는 게 가장 효과적입니다.

더 자세한 내용은 Next.js 공식 문서에서 확인할 수 있습니다. 여러분의 Next.js 앱이 빠르게 동작하길 바랍니다.

참고 자료:
- Next.js 공식 문서: https://nextjs.org/docs