[next.js] SSR vs SSG vs ISR

✔️SSR

• 서버 사이드 렌더링
• 가장 기본적인 사전 렌더링 방식
• 브라우저 요청이 들어올 때마다 사전 렌더링을 진행함
• 장점🌟 : 페이지 내부의 데이터를 항상 최신으로 유지할 수 있음
• 단점💩 : 데이터 요청이 늦어질 경우 모든게 늦어짐

export const getServerSideProps = async () => {
  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);
  return {
    props: { allBooks, recoBooks },
  };
};

export default function Home({
  allBooks,
  recoBooks,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (...);
}

[NEXT 공식문서 참고]

Rendering: Server-side Rendering (SSR) | Next.js

---

✔️SSG

• 정적 사이트 생성
• SSR의 단점을 해결하는 사전 렌더링 방식
• 빌드 타임에 미리 페이지를 사전 렌더링 해둠
• 장점 🌟 : 사전 렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는 매우 빠른속도로 응답가능
• 단점 💩 : 빌드타임 이후에는 다시는 페이지를 렌더링x, 최신 데이터 반영은 어려움

export const getStaticProps = async () => {
  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);
  return {
    props: { allBooks, recoBooks },
  };
};

export default function Home({
  allBooks,
  recoBooks,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (...);
}

 

 

[NEXT 공식문서 참고]

Rendering: Static Site Generation (SSG) | Next.js

---

✔️ISR

• 증분 정적 재생성
• 사전 렌더링 방식
• SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성
• 장점 : 매우 빠른 속도로 응답 가능, 최신 데이터 반영 가능
• 단점 : 시간 기반의 ISR을 적용하기 어려운 페이지도 존재 함
  =>시간과 관계없이 사용자의 행동에 따라 데이터가 업데이트 되는 페이지
  ex : 게시글 삭제, 게시글 수정

export const getStaticProps = async () => {
  console.log("인덱스 페이지");

  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  return {
    props: { allBooks, recoBooks },
    revalidate: 3, //3초주기로 재검증
  };
};

---

On-Demand ISR

• 요청을 받을때마다 페이지를 다시 생성하는 ISR
• Revalidate 요청
• 페이지 업데이트를 직접 트리거링 가능