Next.js 성능

코드 분할은 비용을 세 축으로 좁힌다

렌더링 비용, 전송 비용, 측정 지표를 따로 보면 어떤 코드를 서버에 남기고 어떤 코드를 나중에 받을지 빠르게 결정할 수 있다.

01 Rendering cost

렌더링 비용

상호작용이 없는 UI는 Server Component로 남겨 hydration 대상을 줄인다.

02 Transfer cost

전송 비용

큰 라이브러리와 드문 기능은 route boundary나 dynamic import 뒤로 보낸다.

03 Measure

측정 지표

분할 뒤에는 LCP, INP, unused JavaScript가 실제로 줄었는지 확인한다.

서버로 남긴다 데이터 조합, 정적 설명, SEO 본문처럼 사용자 조작이 없는 영역.
청크를 나눈다 차트, 지도, 에디터처럼 크지만 첫 화면에 항상 필요하지 않은 영역.
UX를 보강한다 늦게 받는 코드에는 skeleton, fallback, 적절한 prefetch 범위를 붙인다.
정리

분할 여부는 “렌더링해야 하는가 → 지금 전송해야 하는가 → 지표가 좋아졌는가” 순서로 판단한다.

const Chart = dynamic(() => import("./Chart"), {
  loading: () => <ChartSkeleton />
});