한입 -4

Full Route Cache

• Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능
• Static Page(정적 페이지)에 적용됨.

Dynamic Page로 설정되는 기준(서버 컴포넌트에만 해당)
: 특정 페이지가 접속 요청을 받을 때마다 매번 변화가 생기거나, 데이터가 달라질 경우

• 캐시되지 않는 Data Fetching을 사용할 경우
• 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을 때

※ 쿼리스트링 build 과정 중 오류 발생시

// layout.tsx
<Suspense fallback={<div>Loading...</div>}>
	<Searchbar />
</Suspense>
// Searchbar.tsx 내에 쿼리스트링이 존재.

• Suspense(미결, 미완성): 곧바로 렌더링하지 않고 fallback props로 전달한 대체 UI가 전달됨. 비동기 작업이 완료될 때까지 대체된다.
• 풀 라우트 캐시로 적용이 어려운 페이지의 경우, 몇 페이지만 static page로 만들 수 있다.

// book>[id]>page.tsx
export const dynamicParams = false;
export function generateStaticParams() {
  return [{ id: "1" },{ id: "2" },{ id: "3" }]
}

주의할 점 1. return 되는 페이지는 문자열 데이터로만 명시할 것
2. 데이터 캐싱이 설정되지 않은 데이터 페칭이 존재할지라도 강제로 static page로 설정된다.

Route Segment Option

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

export const dynamic = 'auto'

1. auto: 기본값. 아무것도 강제하지 않음.
2. force-dynamic: 페이지를 강제로 Dynamic 페이지로 설정
3. force-static: 페이지를 강제로 Static 페이지로 설정
4. error: 페이지를 강제로 Static 페이지로 설정(설정하면 안되는 이유 -> 빌드 오류)

Client Router Cache

• 브라우저에 저장되는 캐시
• 페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터를 보관함
• 레이아웃을 담당하는 RSC Payload에 해당하는 페이지를 캐싱하게 된다.