라우트 세그먼트 옵션 개념 설명
웹 애플리케이션의 특정 페이지나 레이아웃의 동작 방식을 결정하는 설정값. 주로 Next.js의 App Router에서 페이지 상단에 변수를 선언하여 해당 경로의 렌더링 방식(정적/동적), 캐싱 주기, 데이터 보유 시간 등을 제어하는 용도로 활용. 코드 한 줄로 서버의 동작을 세밀하게 조정할 수 있는 강력한 도구.
사용 상황 예시
- 뉴스나 블로그 포털: 실시간 데이터 반영이 필요하므로 특정 주기마다 페이지를 갱신(ISR)할 때
revalidate옵션 사용.
- 사용자 대시보드: 개인화된 정보가 많아 캐싱을 방지하고 매번 실시간 렌더링이 필요할 때
dynamic = 'force-dynamic'설정.
- 정적 가이드 페이지: 데이터 변경이 거의 없어 빌드 시점에 모든 파일을 생성하고 고정할 때 활용.
핵심 옵션 및 기본 문법
각 옵션은 페이지(page.js)나 레이아웃(layout.js) 파일 최상단에서 export 키워드와 함께 선언.
export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'dynamic: 'auto', 'force-dynamic', 'error', 'force-static' 중 선택. 경로의 동적 렌더링 여부를 강제함.revalidate: 숫자(초 단위) 또는false,0설정. 캐시 유효 시간을 지정하여 ISR(Incremental Static Regeneration) 구현 가능.runtime: 'nodejs' 또는 'edge' 선택. 코드가 실행될 환경을 정의함.dynamicParams:generateStaticParams에 정의되지 않은 동적 경로 방문 시 렌더링 여부 결정.
자주 하는 실수
- 상충하는 옵션 설정:
dynamic = 'force-static'과revalidate = 0을 동시에 설정 시 논리적 충돌 발생. static 강제 시 실시간 갱신은 불가능함에 유의. - 오타 및 대소문자 미준수:
reValidate처럼 대문자를 섞어 쓰면 프레임워크가 인식하지 못함. 반드시 정해진 변수명 사용 필요. - 레이아웃 적용 범위 오해:
layout.js에 설정한 옵션은 하위 모든 자식 세그먼트에 영향을 미치므로 신중한 설계 요망.
핵심 요약
- 페이지별 렌더링 방식과 캐시 동작을 제어하는 설정값.
export const문법을 통한 선언적 최적화 방식.- 성능 향상 및 서버 비용 절감을 위한 필수 활용 요소.
참고자료
출처: 한 입 크기로 잘라먹는 Next.js(v15)
