Route tree 읽기
app 폴더의 segment 구조가 어떤 부모와 자식 layout을 만드는지 확인한다.
폴더 하나가 수명 주기 경계를 만든다데이터 위치 결정
여러 자식이 공유하는 fetch는 부모 layout에서, 페이지 전용 데이터는 page에서 가져온다.
캐시와 revalidate 정책을 함께 본다Provider 위치 선택
client provider가 필요한 경우 전체 앱이 아니라 필요한 layout 아래로 내린다.
너무 높은 use client 경계는 번들을 키운다Remount 조건 확인
layout은 유지되고 template은 이동 때 새로 마운트되는 차이를 활용한다.
애니메이션과 초기화 요구에 따라 다르다layout.tsx
공유 수명 주기
하위 route 전환에서도 유지되는 UI와 데이터를 둔다.
state가 남는다는 점을 고려한다
page.tsx
segment 화면
해당 URL에서 실제로 교체되는 본문과 페이지 전용 데이터를
둔다.
params와 searchParams를 확인한다
template.tsx
전환마다 remount
페이지 이동 때 초기화나 애니메이션이 필요하면 사용한다.
layout과 의도적으로 구분한다
provider
클라이언트 상태 범위
상호작용 상태가 필요한 subtree만 감싸 번들 영향과 rerender를
줄인다.
서버 컴포넌트 경계를 지킨다