next로 ISR 구현하기

혹시, ISR이 정확히 뭔지 모른다면 지난 포스팅을 참고하면 좋겠다.

next.js와 리액트

 next에서 ISR을 구현하기 위해서는 간단한 코드 추가만으로도 가능한데 reavalidate를 설정해주는 것으로 SSG를 ISR로 동작하도록 바꾸어준다. 아주 간단하다. 아래의 코드는 60초마다 SSG를 재생성하도록 하는 ISR을 구현하는 코드인데, 이 코드를 ISR로 동작하기 원하는 컴포넌트 상단에 작성해주면 끝난다.

export const revalidate = 60;

 또 다른 방식은 fetch의 옵션을 통해서 지정해주는 방법이다.

  const res = await fetch("요청 URL", {
    next: { revalidate: 3 },
  });

 만약 revalidate 에 0을 준다면 ? SSR과 동일한 동작을 한다.

Data Fetching: Revalidating | Next.js