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

Next.js 프로젝트를 운영하다 보면 한 번쯤은 갑자기 페이지가 느려지는 경험을 한다. 처음부터 정답을 맞히려고 하면 오히려 시간이 더 걸린다. 체계적으로 접근하는 게 결국 가장 빠르다.

첫 번째: 화면만 봐서는 안 된다

사용자가 "페이지가 느려요"라고 말할 때, 실제 원인은 다양할 수 있다.

• 빌드 시간이 늘었나?
• 런타임에 느린가?
• 데이터베이스 쿼리가 느린가?
• 클라이언트 렌더링이 문제인가?

화면만 보면 이 중 어디가 문제인지 알 수 없다. 로그와 응답을 함께 봐야 한다.

sitemap과 canonical 확인

Next.js에서 가장 자주 놓치는 부분이 있다.

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'

이 명령어로 페이지의 메타데이터를 확인하고, 빌드 시 next/head나 메타데이터 설정이 제대로 적용되는지 확인해라. 이게 잘못되면 검색 엔진이나 소셜 미디어가 제대로 캐시하지 못해서 로딩이 느려진다.

빌드 결과 확인

npm run build

빌드 로그에서 확인할 것들:

• 느려진 페이지의 크기는 몇 KB인가?
• ISR 설정이 제대로 되어있나?
• 동적 라우트가 과다하게 생성되지는 않나?
• 제3자 라이브러리가 새로 추가되지는 않았나?

빌드 로그 자체가 시간 단서를 많이 품고 있다.

로컬과 운영 환경의 차이

로컬에서는 빠른데 운영에서만 느린 경우 대부분 환경 차이다. 확인할 것:

• Node.js 버전 다름
• 환경 변수 설정 다름 (특히 API 엔드포인트)
• 캐싱 미들웨어 설정 다름
• 데이터베이스 쿼리 성능 다름

이 중 하나라도 다르면 운영에서 느려질 수 있다.

체계적인 확인 프로세스

1. 먼저 느려진 시점을 파악한다 (언제부터인가?)
2. 빌드 로그에서 변화를 찾는다 (새 라이브러리, 파일 크기 증가 등)
3. 한 개의 변수만 바꿔본다 (캐싱 설정, ISR 시간 등)
4. 각 변경 후 실제 성능을 측정한다

마지막으로 중요한 건, 고친 이유를 로그와 수치로 남겨두는 것이다. 다음번 성능 저하 때 이전 기록이 가장 좋은 단서가 된다.