SSG를 ISR로 전환하는 방법, fetch로 SSG, SSR, ISR 처리하기

SSG -> ISR 으로 전환하기

SSG는 빌드 시점에 정적 HTML을 생성하는 방식입니다.

하지만 ISR로 전환하면, 정적 페이지의 성능을 유지하면서도 주기적으로 데이터를 새로 가져와 페이지를 업데이트할 수 있습니다.

ISR로 전환하려면 revalidate 옵션을 추가하여 페이지가 일정 시간마다 다시 생성되도록 설정할 수 있습니다.

// 3초마다 페이지 재생성
export const revalidate = 3;

Next.js에서 fetch 사용하기: SSG, ISR, SSR 결정하기

Next.js에서는 서버 컴포넌트에서 fetch를 사용할 수 있습니다. fetch 함수는 두 번째 옵션에 따라 SSG, ISR, SSR 방식을 결정합니다.

1. SSG

fetch 호출 시 두 번째 옵션을 제공하지 않는다면, 기본적으로 SSG로 동작하게 됩니다.

페이지는 빌드 시점에 정적 HTML로 생성되고 이후에는 재생성되지 않습니다.

const res = await fetch('https://api.adviceslip.com/advice');
const data = await res.json();
const advice = data.slip.advice;

2. ISR

ISR 방식으로 페이지를 주기적으로 재생성하고 싶다면, revalidate 옵션을 추가하면 됩니다.

예를 들어, 3초마다 페이지를 다시 생성하고 싶다면 아래와 같이 revalidate 값을 설정할 수 있습니다.

const res = await fetch('https://api.adviceslip.com/advice', {
  next: { revalidate: 3 },
});

3. SSR

SSR은 요청 시마다 서버에서 HTML 페이지를 다시 생성하는 방식입니다. cache: 'no-store' 옵션을 사용하면 페이지는 항상 서버에서 새로 렌더링됩니다.

const res = await fetch('https://api.adviceslip.com/advice', {
  cache: 'no-store',
});

 

또는 revalidate: 0으로 설정하면,  SSR처럼 동작하게 됩니다.

const res = await fetch('https://api.adviceslip.com/advice', {
  next: { revalidate: 0 },
});