Next.js App Router

Template은 이동마다 다시 시작하는 공통 UI

layout.tsx는 유지, template.tsx는 탐색마다 새 인스턴스로 마운트된다는 차이에서 선택 기준이 갈립니다.

Layout

preserve

세그먼트 안에서 상태와 UI를 유지

사이드바, 탭, 캐시된 공통 데이터에 적합

remount

navigation마다 컴포넌트 인스턴스를 재생성

상태 초기화와 진입 효과 재실행에 적합

state reset

1 경로 이동

같은 세그먼트 안의 다른 page로 이동

2 layout 유지

공통 UI와 보존할 상태는 그대로 둠

3 template 재마운트

children을 새 인스턴스로 감쌈

4 state reset

폼, 탭 선택, 로컬 UI 상태를 초기화

5 effect run

애니메이션과 측정을 새 페이지 기준으로 실행

animation

진입 애니메이션이 매 navigation마다 처음부터 실행되어야 할 때 사용합니다.

analytics

방문 단위의 타이머, 로그 세션, 성능 측정을 새로 시작할 때 적합합니다.

cleanup

이전 페이지의 입력값이나 임시 선택이 다음 화면에 남으면 안 될 때 씁니다.

경험칙

유지해야 하는 것은 layout, 새로 시작해야 정확한 것은 template에 둡니다.

layout 선택

공통 탐색, 사용자 컨텍스트, 캐시된 영역

template 선택

remount, reset, page-view 단위 side effect