풀 라우트 캐시

Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능.

Static Page만 풀 라우트 캐시가 됩니다.

Static Page VS Dynamic Page

Dynamic Page
1. 캐시되지 않는 Data Fetching 사용하는 경우(cache: "no cache" 사용하는 경우)
2. 동적 함수(쿠키, 헤더, 쿼리 스트링)을 사용하는 컴포넌트가 있을 때

Dynamic Page가 아니면 Static Page 입니다.(Static Page가 Default)

Revalidate 옵션일 경우?
데이터 캐시 뿐만 아니라 풀 라우트 캐시도 함께 업데이트됩니다!

동적 경로에 적용하기

export const dynamicParams = false;

export function generateStaticParams(){
return [{id: "1"}, {id: "2"}, {id: "3"}] //id:1, id: 2, id: 3에 대해선 static Page임

generateStaticParams() 정해진 함수로 Static Page를 만들 수 있어요.
const dynamicParams 옵션으로 자동 생성되지 않게 할 수 있습니다. 기본값은 true로 페이지가 자동 생성되게 합니다.

build 시 클라이언트 컴포넌트 주의사항

"use client";

import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import style from "./serachbar.module.css";

export default function Searchbar() {
  const router = useRouter();
  // 비동기로 동작 -> 브라우저에 마운트되었을 때 종료
  const searchParams = useSearchParams();

Static Page를 사전 렌더링할 때, useSearchParams()와 같이 비동기 훅을 호출하게 될 경우 오류가 발생합니다. 빌드 타임에는 쿼리스트링이 존재하지 않기 때문이죠! 이럴 경우 어떻게 해야할까요?
Suspense 내장 컴포넌트를 이용하면 됩니다. Suspense는 미완성이라는 뜻으로 렌더링을 미룰 수 있는 기능을 합니다.

  <Suspense fallback={<div>Loading...</div>}>
       <Searchbar />
     </Suspense>

대신 fallback 안에 있는 요소를 렌더링을 해줄 수 있어요. 이 기능으로 사전 렌더링 시 Searchbar 렌더링을 제외시킬 수 있습니다.

라우트 세그먼트 옵션

약속된 이름의 변수를 선언하고 내보냄으로써 페이지의 설정을 우리가 강제로 조정할 수 있는 기능입니다.

클라이언트 라우터 캐시

브라우저에 저장되는 캐시입니다.
페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터를 보관합니다.(레이아웃 같은)

중복되는 레이아웃인 루트 레이아웃과 서치바 레이아웃이 클라이언트 라우터 캐시에 저장됩니다!
하지만, 클라이언트 라우터 캐시는 기본적으로 새로고침되면 캐시가 삭제되는 점을 유의해야합니다.