라우트 세그먼트 옵션과 클라이언트 라우터 캐시

Route Segment Option

라우트 세그먼트 옵션은 Next.js에서 특정 페이지의 동작을 강제로 설정할 수 있는 옵션이다.

모든 컴포넌트를 개별적으로 확인하지 않고도 페이지를 정적(Static) 또는 동적(Dynamic) 페이지로 설정하거나, 페이지의 리밸리데이트 시간을 강제로 설정할 수 있다.

dynamic 옵션

dynamic 옵션을 사용하여 특정 페이지의 유형을 강제로 설정할 수 있다.

export const dynamic = '옵션';

설정 값

1. 'auto' 
   • 기본값으로, 아무것도 강제하지 않는다.
   • Next.js가 페이지 내 컴포넌트들의 동작을 분석하여 자동으로 페이지 유형을 결정한다.
2. 'force-dytnamic' 
   • 페이지를 강제로 dynamic 페이지로 설정한다.
   • 모든 요청에 대해 서버에서 페이지를 렌더링한다.
3. 'force-static' 
   • 페이지를 강제로 static 페이지로 설정한다.
   • 이 설정을 페이지 내의 모든 동적 데이터 페칭이나 동적 함수 사용을 무시하고, 페이지를 완전히 정적으로 만든다.
   • 동적 콘텐츠가 있더라도 빌드 시점의 데이터만 사용하여 정적 페이지를 생성한다.
4. 'error' 
   • 페이지를 강제로 static 페이지로 설정하려고 시도하지만, 동적 데이터 페칭이나 동적 함수 사용이 감지되면 빌드 시 오류를 발생 시킨다.
   • 'force-static' 보다 더 엄격한 설정으로, 의도치 않은 동적 요소 사용을 방지하고 할 때 사용된다.

 

Next.js 공식 문서에서는 특별한 상황이 아니면 dynamic  옵션 사용을 권장하지 않는다. 앱 라우터 버전의 Next.js는 페이지를 구성하는 각 컴포넌트의 동작을 세밀하게 분석하여 자동으로 페이지를 static 또는 dynamic으로 최적화하기 때문이다.

따라서, 대부분의 경우 자동 설정을 사용하는 것이 가장 효율적이다.

 

Client Router Cache

클라이언트 캐시는 페이지 간 이동 시 공통으로 사용되는 컴포넌트나 레이아웃을 효율적으로 관리하기 위해 Next.js에서 제공하는 기능이다.

주요 특징

1. 공통 레이아웃 재사용: 여러 페이지에서 공통으로 사용되는 레이아웃 컴포넌트를 캐시하여 재사용
2. 중복 로딩 방지: 동일한 레이아웃이나 컴포넌트를 여러 번 로드하는 것을 방지
3. 메모리 내 저장: 브라우저의 메모리에 캐시를 저장하여 빠른 접근이 가능
4. 네비게이션 최적화: 페이지 전환 시 이미 캐시된 컴포넌트를 활용하여 빠른 렌더링을 제공

 

작동 방식

첫 페이지 로드 시 공통 레이아웃과 컴포넌트를 Client Router Cache에 저장 -> 다른 페이지로 이동할 때, 캐시에 저장된 공통 요소를 재사용 -> 새로운 페이지에 고유한 컨텐츠만 추가로 로드하여 전체 로딩 시간을 단축

 

주의 사항

• 클라이언트 라우터 캐시는 페이지의 전체 데이터를 저장하는 것이 아니라, 공통 레이아웃과 컴포넌트만을 대상으로 한다.
• 동적 데이터나 페이지 특정 콘텐츠는 여전히 각 페이지 요청 시 새롭게 로드된다.
• 새로고침이 되거나 탭을 껐다 재접속하는 경우에는 캐시가 지워진다.