Next.js에서 제공하는 4가지 렌더링 방식

 

 

 

요즘들어 모의면접을 보는데

렌더링 방식에 대해서 질문하시는 경우가 있었어서

정확히 알아두고자 다시 정리한다!

 

 

1. SSG - 정적 생성 (Static Generation)
    : 정적 생성은 빌드 타임에 페이지를 미리 생성하는 방식입니다. 
     getStaticProps와 getStaticPaths 함수를 사용하여 데이터를 가져오고,
     이 데이터를 기반으로 HTML 파일을 생성합니다. 
     이 방식은 빠른 페이지 로딩 속도를 제공하며 SEO에 유리합니다.
     페이지의 내용에 있는 데이터가 자주 바뀔 필요가 없고, 검색엔진 최적화가 필요한 페이지에 적합하다.
     블로그, 뉴스 등 정보성 페이지

     🎀📚 fetch한 데이터는 영원히 변치 않는다. 계속 컴포넌트를 갱신할 필요가 없습니다.

// fetch시 아무 옵션도 부여 x
const response = await fetch(`https://randomuser.me/api`);

2. 서버 측 렌더링 (Server-Side Rendering, SSR)
    : 서버 측 렌더링은 요청 시마다 서버에서 페이지를 생성하는 방식입니다. 
     getServerSideProps 함수를 사용하여 요청 시마다 데이터를 가져오고, 

     이를 기반으로 HTML을 생성합니다. 
     최신 데이터를 항상 보여줄 수 있지만, 요청 속도가 느릴 수 있습니다.

     🎀📚 fetch한 데이터는 실시간으로 계속 변경된다. 컴포넌트 요청이 있을 때마다 데이터를 갱신해서 최신 데이터만 제공해야 합니다.

 // fetch시 매번 갱신, 캐시된 데이터 취급 X
 const response = await fetch(`https://randomuser.me/api`, {
    cache: "no-cache",
  });

3. 클라이언트 측 렌더링 (Client-Side Rendering, CSR)
    : 클라이언트 측 렌더링은 브라우저에서 JavaScript를 사용하여 

     데이터를 가져와 페이지를 렌더링하는 방식입니다. 
     React의 기본적인 렌더링 방식과 유사하며, useEffect 훅을 사용하여 데이터를 가져옵니다.
     초기 로딩 속도가 느릴 수 있지만, 이후의 상호작용이 빠릅니다.

     🎀📚 fetch한 데이터는 실시간으로 계속 변경된다. 컴포넌트 요청이 있을 때마다 데이터를 갱신해서 최신 데이터만 제공해야 합니다.

"use client";

4. Incremental Static Regeneration (ISR)
    : Incremental Static Regeneration은 정적 페이지를 생성하고, 

     이후에 페이지를 업데이트할 수 있는 기능입니다. 
     revalidate 속성을 사용하여 설정된 시간마다 페이지를 다시 생성할 수 있습니다. 
     이 방식은 정적 페이지의 장점과 동적 페이지의 유연성을 결합합니다.

     🎀📚 fetch한 데이터는 가끔 변한다. 일정 주기마다 가끔씩만 컴포넌트를 갱신합니다.

const response = await fetch(`https://randomuser.me/api`, {
    next: {
      revalidate: 5,
    },
  });