Next.js] 풀라우트 캐시 적용하기, 404 페이지

서치 페이지

• 실시간으로 값을 가져오는 페이지라면 어쩔수없이 풀라우트 캐시는 포기해야한다.
  🎇BUT 조금이라도 빠르게 해볼까?
  데이터 캐시에 보관할수있도록 해보자!
  
  {cache: "force-cache"} 추가하면 검색했던 페이지는 캐싱된다.

북페이지: id 파라미터를 가진 동적 페이지

• params에 어떤값이 올지 모른다.
• 어떤 도서 데이터들이 빌드타임에 만들어져야하는지 알려주면 됨.⬇️

generateStaticParams

• 미리 만들어주는 정적 params

export function generateStaticParams() {
return [{id:"1"},{id:"2"},{id:"3"}]; //문자열로만 명시

• 캐시가 적용되지않은 패치함수가 있더라도. 정적페이지가된다.

• 빌드해보면 미리 생성되어있음.
  

404페이지 만들기

• 값이 없을때 not-found 페이지로 자동으로 가게 만들어주기
  import nofound from 'next/navigation'
  

• app 폴더 아래에 no-found.tsx 페이지 생성

generateStaticParams 설정해준 정적 params 빼고는 다 not-found페이지로 이동

export const dynamicParams = false;

• 전혀 다이나믹하면 되는구나!
• 데이터상에 있어도 generateStaticParams에 설정하지 않았으면 404페이지로