Server Component 페이지 속도, 왜 느려졌나

로컬에서는 괜찮던 설정도 배포 환경에서는 다르게 보인다. Server Component 성능 문제도 그렇다.

화면 하나만 봐서는 원인을 찾기 어렵다. 서버 로그, 데이터 조회 시간, 캐시 상태를 함께 봐야 한다.

한 줄 요약부터

어느 부분이 느린가? 초기 로딩? 페이지 전환? 데이터 조회? 이것부터 명확히 하자.

먼저 볼 파일: route 설정

server component를 쓰는 경로가 올바르게 설정되었는가? 캐시 정책이 의도대로 작동하는가?

npm run build
# 빌드 로그에서 static, dynamic, revalidate 구분 확인

서버에서 볼 값

데이터베이스 조회가 얼마나 시간을 잡아먹는가? 불필요한 쿼리가 없는가? N+1 문제는 없는가?

• 데이터 조회 시간
• API 응답 시간
• 렌더링 완료까지의 시간

브라우저에서 볼 값

서버에서는 빠르지만 브라우저에서 느리다면 HTML 크기, JavaScript 번들, 네트워크 지연을 확인하자.

캐시 전략 점검

Server Component의 캐시가 제대로 작동하는가? 자주 바뀌는 데이터를 무한정 캐시하고 있진 않은가?

로그와 응답으로 느린 부분을 명확히 한 뒤, 가장 영향이 큰 부분부터 최적화하자.