Next.js 코드 리뷰와 성능 최적화: 캐시·이미지·번들 진단

데이터 경계

Server Component, Client Component, Route Handler 사이 책임이 섞이지 않았는지 본다.

architecture

next/image의 size, priority, remotePatterns와 next/font subset을 확인한다.

asset cost

fetch cache, revalidate, dynamic route 설정이 데이터 최신성 요구와 맞는지 본다.

freshness

Lighthouse와 bundle analyzer로 변경 전후 LCP, INP, JS 크기를 비교한다.

근거

이미지

LCP 대상 이미지는 priority와 명확한 크기를 가진다. fill 사용 시 sizes가 없으면 불필요하게 큰 이미지를 받을 수 있다.

next/image

스크립트

third-party script는 로딩 전략과 사용자 영향 범위를 정한다. beforeInteractive는 정말 초기 실행이 필요한 경우만 쓴다.

next/script

캐시

정적 데이터와 사용자별 데이터를 같은 캐시 정책으로 묶지 않는다. revalidate 값은 콘텐츠 변경 주기와 맞아야 한다.

캐시 범위

성능 증거 최적화 PR에는 측정 전후 수치가 함께 있다.

오류 화면 loading, error, notFound 경계가 핵심 경로에 존재한다.

번들 경계 무거운 클라이언트 의존성이 layout에 올라가지 않는다.

boundary -> cache -> media -> script -> bundle -> Lighthouse before/after