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

라우트 세그먼트 옵션

: 특정 페이지의 유형을 강제로 Static, Dynamic 페이지로 설정

이 옵션은 알아서 자동적으로 변환해주는 app router에서는 사실상 잘 사용되지 않고 권장되지 않지만 이런게 있구나 하는 정도로 알아두면 좋을 것 같아서 코드로만 정리했다.

export const dynamic = "auto";
export const dynamic = "force-dynamic";
export const dynamic = "force-static";
export const dynamic = "error";

• auto : 기본값, 아무것도 강제하지 않음
• force-dynamic: 페이지를 강제로 Dynamic 페이지로 설정
• force-static : 페이지를 강제로 Static 페이지로 설정
• error : 특정 페이지를 error 옵션으로 설정하게 되면 현재 페이지를 강제로 Static page로 변환하려고 해도 searchParams 같은 동적 함수가 사용되었다면, 캐싱되지 않는 데이터 패칭을 할 경우 build 시 오류를 발생하게 된다.
  
  
  

클라이언트 라우트 캐시

루트레이아웃, 서치바 레이아웃 같은 동일한 레이아웃이 있을 경우 풀 라우트 캐시에서 한 번, 클라이언트에서 한 번 총 2번을 불러오게 된다.

이런 불필요성을 막기 위해 공통적으로 불러오는 레이아웃 같은 부분은 클라이언트에 저장해두고 다시 요청이 들어왔을 때 풀 라우트 캐시가 아닌 클라이언트 라우트 캐시에 저장된 부분을 빠르게 가져오는 방식이다.

그리고 클라이언트 라우트에 없는 나머지 부분들을 풀라우트 캐시 혹은 백엔드 서버에서 가져와서 보여준다.

⭐️ 클라이언트 라우트 캐시는 “새로고침”을 하면 자동으로 새로 불러와진다.

클라이언트 라우트 간단 실습 👩🏻‍💻

import { ReactNode, Suspense } from "react";
import Searchbar from "../../components/searchbar";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <div>
      <div>{new Date().toLocaleString()}</div> {/* 검색할 때마다 시간 보여줌 */}
      <Suspense fallback={<div>Loading...</div>}>
        <Searchbar />
      </Suspense>
      {children}
    </div>
  );
}

화면 확인 ✅

검색 후 시간 확인 ✅

검색을 했는데도 시간이 동일하게 뜬다는 것은 클라이언트 라우트에 저장된 레이아웃을 그대로 가져왔기 때문!

새로고침 후 확인 ✅

하지만 새로고침을 해보면 시간이 변경되어 새로 가져왔다는 것을 확인할 수 있다. (클라이언트 라우트 적용 안됨)