증분 정적 재생성(ISR)란?

• 단순히 그냥 SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술.

ex) 원래의 SSG

• 최신데이터 반영이 어려움
  

ISR

• 유통기한이 끝나면 새롭게 다시 페이지를 정적으로 다시 생성
  
  

SSG 장점 + SSR 장점

• 매우 빠른 속도로 응답 가능
• 최신 데이터 반영 가능
  

실습

• 랜덤하게 추천도서를 바꿔가며 보여주는 페이지에 적절!

//SSG : 정적 생성/ 빌드 타임에 랜더링
export const getStaticProps = async () => {
  //한번만 실행되는 함수
  console.log("인덱스 페이지");
  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  // console.log("allBooks", allBooks);
  return {
    //무조건 객체를 반환해야함
    //객체안에 props라는 키를 가지고 있어야함
    //페이지안에 props로 전달됨
    props: {
      allBooks,
      recoBooks,
    },
    🚀//ISR 몇 초마다 재생성할지
    🚀revalidate :  3,
  };
};

• npm run build
  
  3초마다 리랜더링
• 새로고침 계속 누르면 3초에 한번씩 console 찍힘
  

되도록이면 ISR로 사용해서 코드 만들기!