Next.js

Next.js 정적 생성(SSG) 후 페이지 속도가 느려졌을 때

SSG 페이지의 성능 저하는 HTML head의 메타데이터부터 확인해서, 빌드 로그와 실제 응답을 비교하면 원인을 좁힐 수 있다.

2026년 6월 24일·2분 읽기

정적 생성을 통해 페이지를 미리 빌드했는데 속도가 느려지거나 검색 엔진 최적화(SEO)에 문제가 생겼을 수 있다. 로컬과 운영 환경의 상태를 비교해서 원인을 찾는 것이 효율적이다.

공개 URL의 HTML을 직접 확인한다

배포된 페이지의 HTML head 부분을 확인해서 메타데이터가 올바르게 포함되어 있는지 본다.

curl -s https://example.com/page | head -100

또는 브라우저에서 우측 클릭 -> 페이지 소스 보기로 확인한다.

다음을 특히 확인한다.

빌드 중에 경고나 에러가 없었는지 확인한다.

npm run build

특히 정적 생성 과정에서 이미지 최적화, 폰트 로딩, 외부 리소스 로딩 시간이 예상 시간을 초과하지 않았는지 확인한다.

생성된 HTML 파일이 너무 크지 않은지 확인한다.

ls -lh .next/server/pages/
# 또는
du -sh .next

파일이 비정상적으로 크면 불필요한 데이터가 포함되어 있을 수 있다.

브라우저 캐시 헤더가 올바르게 설정되어 있는지 확인한다.

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

정적 페이지는 캐시 시간을 길게 설정해야 반복되는 요청에서 빠르게 응답할 수 있다.

Next.js의 Image 컴포넌트를 사용했다면, 이미지가 실제로 최적화되어 제공되는지 확인한다.

# 브라우저 개발자 도구 -> 네트워크 탭에서 이미지 크기 확인
# 또는
curl -I https://example.com/_next/image?url=...&w=1200

이미지 파일 크기와 응답 시간을 확인한다.

loCAL 환경에서 한 번 더 빌드한 후, 결과를 운영 환경과 비교한다.

# 로컬에서
npm run build

# 로컬 내용과 운영 내용을 비교
grep -r "og:title" .next/server/pages/

메타데이터나 컨텐츠가 다르게 생성되고 있지 않은지 확인한다.

빌드 시간이 매우 오래 걸리면 성능 문제의 신호일 수 있다.

time npm run build

특정 페이지의 빌드가 특별히 오래 걸린다면, 그 페이지의 의존성을 검토해야 한다.

Next.js 빌드 분석 도구를 사용해서 각 페이지의 빌드 시간을 확인한다.

UNCLOSE_TRACING=1 npm run build

느리게 빌드되는 페이지를 찾으면 그 페이지의 최적화에 집중할 수 있다.

정적 생성과 동적 렌더링의 경계가 명확한지 확인한다. 동적이어야 하는 부분이 정적으로 빌드되면 사용자가 보는 데이터가 항상 같게 된다.

Google Lighthouse나 PageSpeed Insights를 사용해서 실제 성능을 측정한다.

curl -w "@curl-format.txt" -o /dev/null -s https://example.com/page

FCP(First Contentful Paint), LCP(Largest Contentful Paint) 등의 지표를 확인한다.

빌드 시간, 파일 크기, 로딩 시간에서 발견한 차이점을 기록한다. 다음 SSG 배포 때 참고할 수 있다.