next.js] 풀 라우트 캐시2(dynamic 페이지->static 페이지)

✅useSearchParams은 동적 페이지

• useSearchParams() -> 쿼리스트링 꺼내옴
• 빌드 타임에 정적으로 생성하다가 해당 훅을 호출해서 오류가 발생함

이런 문제 어케 해결함?

✅<Suspense> 태그로 컴포넌트 감싸기

• suspense : 미완성
  -> 컴포넌트가 아예 동적 랜더링되도록 만들어줌!
• 사전 랜더링으로 배제됨(곧바로 랜더링되지 않는다.)
• 컴포넌트가 모두 랜더링될때까지 미완성 상태로 남아있는다.
  - useSearchParams() 비동기- 쿼리 스크링이 불러왔을때 종료되는 비동기 함수
  - 서치바 비동기 작업이 끝나면 랜더링이 이루어짐

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

dynamic -> static 페이지로 바꾸기

1. 루트 레이아웃을 확인해본다.

   • 동적함수? 있는지? 한개라도 있으면 다이나믹 페이지.
   • 루트레이아웃 안에 컴포넌트는 데이터를 fetch메소드로 데이터를 가져오고있다.
     

   -> 아무런 캐시 옵션이 없다. 없으면, no-store 캐시❌
   -> 푸터컴포넌트롤 가지고있는 페이지는 모든 페이지가 다이나믹 페이지이다.
   

• {cache: "force-cache"} 추가 -> 이제 static 페이지

2. {next: (revalidate:3}}

• revalidate는 static 이다.