SSG, ISR, SSR, CSR 정리

next js 렌더링 이해를 위한 핵심 개념

 

1. SSG (Static Site Generation)

특징

1. 빌드 시점에 정적 페이지 생성 = 빌드 타임에 한 번 생성, 그 이후에는 재생성하지 않음

2. 빠른 초기 로딩 속도 = html이 미리 생성되어 있기 때문

3. cdn 활용 가능 = 정적 파일 cdn 배포해 전 세계 어디서든 빠르게 접근 가능

(아무 옵션도 주지 않음)

 

용도

변하지 않는 데이터 = 블로그, 마케팅 페이지, 문서 등 변동 없는 콘텐츠에 적합

// src/pages/index.js
export async function getStaticProps() {
  // 빌드 시점에 데이터를 가져옴
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Home({ data }) {
  // 정적 페이지에 데이터를 렌더링
  return (
    <div>
      <h1>Static Site Generation</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

 

 

2. ISR (Incremental Static Regeneration)

특징

1. 주기적으로 정적 페이지 재생성 = 일정 시간마다 페이지 재생성해 최신 데이터 반영

2. 초기 로딩 속도 빠름 = 정적 페이지 제공하므로

3. seo에 유리 = 정적 페이지 제공하므로 seo에 유리

4. 데이터 업데이트 가능

(가끔 한번씩만 갱신하라는 옵션 줌)

 

용도

가끔씩 업데이트 되는 데이터 = 브로그 게시물, 뉴스 기사 등 정기적으로 업데이트 되는 콘텐츠에 적합

// src/pages/index.js
export async function getStaticProps() {
  // 빌드 시점에 데이터를 가져옴
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { 
    props: { data },
    revalidate: 60, // 60초마다 페이지 재생성
  };
}

export default function Home({ data }) {
  // 정적 페이지에 데이터를 렌더링
  return (
    <div>
      <h1>Incremental Static Regeneration</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

 

3. SSR (Server Side Rendering)

특징

1. 요청 시마다 페이지 생성 = 클라이언트 요청이 있을 때마다 서버에서 html 페이지를 생성하여 응답

2. 최신 데이터 제공

3. seo에 유리 = 서버에서 렌더링된 html을 제공하므로

4. 초기 로딩 속도 느림 = 요청 시마다 서버에서 페이지를 생성하므로

(매번 갱신하라는 옵션 줌)

 

용도

실시간으로 변하는 데이터 = 사용자 개인화 페이지, 대시보드 등 실시간 데이터가 중요한 페이지에 적합

// src/pages/index.js
export async function getServerSideProps() {
  // 요청 시마다 데이터를 가져옴
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Home({ data }) {
  // 서버에서 가져온 데이터를 렌더링
  return (
    <div>
      <h1>Server Side Rendering</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

 

 

4. CSR (Client Side Rendering)

특징

1. 브라우저에서 페이지 렌더링 = 모든 렌더링이 클라이언트 측에서 이루어짐

2. 초기 로딩 속도 느림 = 클라이언트에서 자바스크립트 다운, 실행해야 하므로

3. 서버 부하 감소

4. seo에 불리 = 초기 html이 비어 있을 수 있음

 

용도

사용자와의 상호작용이 많은 페이지 = 대시보드, 애플리케이션 인터페이스 등 클라이언트 측 상호작용이 중요한 경우에 적합

// src/pages/index.js
import { useEffect, useState } from 'react';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 클라이언트 측에서 데이터를 가져옴
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>Client Side Rendering</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}