[Next] Route Segment Config

Route Segment Config는 Next.js의 **앱 라우터(App Router)**에서 특정 경로(segment)의 동작 방식을 제어하는 설정 파일입니다. 이 파일을 사용하면 페이지나 레이아웃의 정적/동적 렌더링 방식, 캐싱 전략 등을 세밀하게 조정할 수 있습니다.

page.tsx 또는 layout.tsx 파일 내에서 export const 문을 사용하여 설정 변수를 정의합니다.

---

주요 설정 옵션

1. dynamic

이 옵션은 경로 세그먼트의 렌더링 방식을 제어합니다.

• 'auto' (기본값): Next.js가 자동으로 정적(Static) 또는 동적(Dynamic) 렌더링을 판단합니다.
• 'force-static': 해당 경로를 무조건 정적으로 렌더링합니다. 요청이나 쿠키와 같은 동적 데이터가 있더라도 빌드 시 HTML을 생성합니다.
• 'force-dynamic': 해당 경로를 무조건 동적으로 렌더링합니다. 모든 요청에 대해 서버에서 렌더링을 다시 수행합니다.

사용 예시:

JavaScript

 

// app/blog/[slug]/page.tsx
export const dynamic = 'force-static';

---

2. revalidate

이 옵션은 정적 렌더링된 페이지의 재검증(revalidation) 주기를 설정합니다.

• false: 캐싱하지 않고, 항상 동적으로 렌더링합니다.
• 0: 캐싱하지만, 매 요청마다 캐시를 재검증합니다.
• number: 캐시의 유효 기간을 초 단위로 설정합니다. 이 시간이 지나면 다음 요청 시 페이지를 다시 렌더링합니다.

사용 예시:

JavaScript

 

// app/products/page.tsx
export const revalidate = 60; // 60초마다 페이지를 재검증합니다.

---

3. fetchCache

fetch 함수에 대한 캐싱 동작을 제어합니다. revalidate 옵션과 연동되어 동작하며, 기본값은 auto입니다.

• 'force-no-store': 모든 fetch 요청을 캐싱하지 않도록 강제합니다.
• 'default-no-store': 기본적으로 캐싱하지 않지만, revalidate 옵션이 설정된 fetch 요청은 캐시합니다.

---

왜 필요한가?

Route Segment Config는 Next.js의 핵심 기능인 **하이브리드 렌더링(Hybrid Rendering)**을 세밀하게 제어하는 데 필수적입니다. 개발자는 각 페이지의 특성(예: 자주 바뀌는 데이터 vs. 정적인 콘텐츠)에 따라 최적의 렌더링 방식을 선택하여 성능과 SEO를 동시에 향상시킬 수 있습니다.

 

공식문서를 참고하자

https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config