Next.js 09 - 라우트 세그먼트 옵션, 클라이언트 라우터 캐시

라우트 세그먼트 옵션, export const dynamic 

Next.js는 기본적으로 페이지의 동적 여부를 자동으로 판단하지만, 개발자가 직접 강제 설정할 수도 있다.

 

페이지의 동적 여부란? (dynamic page 와 static page) https://dazz6study.tistory.com/224

 

사용법

page.tsx 혹은 layout.tsx 상단에 dynamic 코드를 기재한다.

export const dynamic = "option"

옵션

옵션	설명
"auto"	Next.js가 자동으로 동적 / 정적 여부 분석
"force-dynamic"	강제로 Dynamic Page 처리
"force-static"	강제로 Static Page 처리
"error"	동적 요소가 있으면 엄격하게 에러 발생

 

주의사항

1. force-dynamic 은 가능하면 지양한다.

Next.js의 캐싱 / 렌더링 최적화 메커니즘을 무시하기 때문에 부작용이 발생할 수 있기 때문인데,

실무에서는 쿼리스트링 기반 검색이나 인증 기반 렌더링 등으로 인해 강제 Dynamic이 필요한 경우가 있기 때문에

상황에 따라 개발자의 판단이 필요하다.

 

2. force-static 은 무조건 정적으로 렌더링된다.

headers() 나 cookies() 등은 빈값을 반환하기 때문에, 쿼리스트링이 중요한 페이지는 기능이 동작하지 않을 수 있다.

---

클라이언트 라우터 캐시

Next.js App Router는 페이지 이동 시 공통 컴포넌트를 매번 다시 요청하지 않고, 캐시에서 재활용하는 구조를 제공한다.

 

예를 들어 같은 경로에 동일하게 사용되는 layout 들은 캐시되어 재사용된다.

실제로 다시 로드하는 것은 page.tsx에서 필요한 데이터뿐이다.

 

특징

항목	설명
저장 위치	브라우저 메모리 (In-memory)
저장 대상	레이아웃, 공통 컴포넌트, RSC Payload 일부
새로고침 시	캐시 초기화
페이지 전환 시	캐시된 컴포넌트 재사용