Next.js 메모이제이션 판단 경계

Next.js App Router에서는 서버 컴포넌트와 클라이언트 컴포넌트의 역할이 달라, 메모이제이션을 둘 위치도 먼저 가려야 한다.

Next.js 메모이제이션 판단 경계Next.js App Router에서는 서버 컴포넌트와 클라이언트 컴포넌트의 역할이 달라, 메모이제이션을 둘 위치도 먼저 가려야 한다.
1

서버 컴포넌트

React.memo 대상 아님. 서버에서 렌더링되어 클라이언트 상호작용 리렌더 비용을 직접 만들지 않는다.

2

클라이언트 컴포넌트

측정 대상. state, context, event가 자주 바뀌는 UI에서 Profiler로 비용을 확인한다.

3

라우트 전환

페이지 이동이 느리면 메모보다 데이터 로딩, 코드 분할, Suspense 경계를 먼저 의심한다.

4

반복 UI

큰 리스트와 복잡한 행 컴포넌트는 props 안정화와 가상화가 함께 필요할 수 있다.

핵심요약: 메모이제이션은 “렌더링이 비싼 클라이언트 경계”에서만 후보가 된다.