Next.js 페이지 속도가 갑자기 느려졌을 때

Next.js 페이지가 평소처럼 빠르다가 어느 날 갑자기 느려지면 뭔가 바뀐 게 있을 것이다. 체계적으로 접근하면 원인을 찾을 수 있다.

빌드 크기 확인

가장 먼저 빌드 최적화 요약을 본다:

npm run build
# "Page  Size   First Load JS" 테이블 확인

Next.js 빌드 후 출력되는 테이블에서 어떤 페이지의 크기가 급증했는지 본다. 500KB 이상이면 너무 크다.

특히 "First Load JS" 부분에서 공유 JavaScript 크기가 늘었다면 의존성을 의심한다.

의존성 추가 확인

최근에 npm에 뭔가 설치했나?

# 최근 변경 사항 확인
git diff HEAD~1 package.json

# 또는 전체 의존성 크기 분석
npx webpack-bundle-analyzer dist/static/chunks/main.js

새로 추가한 라이브러리가 500KB 크기라면 분명 페이지가 느려진다.

이미지 최적화

Next.js Image 컴포넌트를 사용했는가?

// 최적화됨
import Image from 'next/image';
<Image src="..." width={800} height={600} />

// 최적화 안 됨
<img src="..." />

큰 이미지를 <img>로 넣으면 최적화 없이 그대로 로드된다. 모든 이미지를 Next.js Image로 바꾸는 것만으로도 크기가 줄어든다.

동적 import 활용

페이지에서 사용하지 않는 코드도 번들에 들어가면 안 된다. 동적 import를 쓴다:

// 처음부터 로드 (비효율)
import HeavyComponent from './heavy';

// 필요할 때만 로드 (효율적)
const HeavyComponent = dynamic(() => import('./heavy'));

특히 모달이나 팝업 같은 조건부 컴포넌트는 동적 import로 처리한다.

데이터 페칭 최적화

getStaticProps나 getServerSideProps에서 뭔가 오래 걸리나?

export async function getStaticProps() {
  // 이 부분에서 시간 지연이 있나?
  const data = await fetchDataFromDB();  // 5초 걸린다면?

  return { props: { data }, revalidate: 60 };
}

데이터 페칭이 느리면 전체 페이지 빌드가 느려진다. ISR (Incremental Static Regeneration) revalidate 시간을 줄이거나, 필요한 데이터만 가져온다.

API 응답 시간

SSR 페이지에서 API를 호출한다면, 그 API 응답 시간이 페이지 로드 시간을 결정한다:

# API 응답 시간 측정
time curl https://api.example.com/endpoint

1초 이상이면 지연이 눈에 띤다. API를 캐시하거나 응답을 최소화한다.

데이터베이스 쿼리

SSR에서 데이터베이스에 직접 접근한다면, 쿼리가 느렸을 수도 있다:

// 모든 필드를 가져오면 느림
const users = await db.users.findMany();

// 필요한 필드만 가져오기
const users = await db.users.findMany({
  select: { id: true, name: true }
});

특히 관계 데이터를 모두 로드한다면 N+1 문제가 생길 수 있다.

캐시 전략 검토

Cache-Control 헤더가 제대로 설정되어 있나?

curl -i https://example.com/ | grep -i cache-control

정적 페이지라면 Cache-Control: public, max-age=3600 정도를 설정해서 브라우저 캐시를 활용한다.

Lighthouse로 측정

Chrome DevTools의 Lighthouse 탭에서 실제 성능을 측정한다. 어디서 시간이 가장 많이 나가는지 명확히 보인다.

로컬에서는 빠르더라도 실제 네트워크 환경에서는 느릴 수 있으니, Lighthouse의 "Throttle" 설정으로 느린 네트워크를 시뮬레이션한다.