layout 유지 영역

공통 UI를 올린다

sidebar, top nav, section frame처럼 여러 child page가 공유하는 영역은 가장 가까운 공통 layout에 둔다.

page마다 달라져야 하는 fetch나 loading UI를 너무 높은 layout에 두면 불필요한 결합이 생긴다.

layout이 유지되면 그 안의 client component 상태도 이동 중 남을 수 있다.

root layout

문서 뼈대 html, body, 전역 provider, metadata 기본값을 둔다.

모든 route에 영향이 있다.

nested layout

섹션 frame dashboard나 docs 같은 섹션의 공통 UI를 유지한다.

너무 넓게 올리지 않는다.

template

재마운트 필요 segment 이동마다 새 인스턴스가 필요하면 template을 고려한다.

layout과 반대 성격이다.

provider

상태 범위 provider 위치가 구독 범위와 리렌더 비용을 결정한다.

필요한 곳까지 내린다.

보존 이동 중 남아야 할 상태와 초기화되어야 할 상태를 구분했는가.

데이터 상위 layout fetch가 자식 page의 신선도 요구와 충돌하지 않는가.

provider 전역 provider가 모든 route를 불필요하게 client bundle로 만들지 않는가.

app/layout.tsx
app/dashboard/layout.tsx
app/dashboard/projects/page.tsx