Next.js 프레임워크 SSR vs SSG 차이 완벽 정리

1. SSR(Server Side Rendering)이란?

개념

SSR은 사용자가 페이지에 접속했을 때 서버에서 HTML을 즉시 생성해 전달하는 방식입니다. 브라우저는 완성된 HTML을 받아 곧바로 화면을 표시할 수 있고, 이후 자바스크립트가 실행되면서 인터랙티브한 React 앱이 동작하게 됩니다.

특징

• 실시간 데이터 반영 가능: 요청 시마다 서버에서 데이터를 가져와 화면에 반영.
• SEO 친화적: 검색 엔진이 완성된 HTML을 바로 수집 가능.
• 최초 응답 속도(FCP)는 빠름: 빈 화면 대신 바로 HTML을 내려주기 때문.

코드 예시

// 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

서버에서 불러온 데이터: {data.message}

;
}

👉 getServerSideProps 함수는 매 요청마다 실행되어 서버에서 데이터를 가져온 뒤 페이지를 생성합니다.

---

2. SSG(Static Site Generation)이란?

개념

SSG는 빌드 시점에 HTML을 미리 생성해두고, 사용자가 페이지를 요청하면 서버가 캐싱된 HTML을 그대로 반환하는 방식입니다. 즉, 페이지를 미리 만들어 두는 정적 사이트 생성 방식이죠.

특징

• 매우 빠른 응답 속도: HTML이 이미 준비되어 있으므로 서버 부하가 적음.
• CDN 배포 최적화: 정적 파일이므로 전 세계 CDN에 배포 가능.
• 데이터 변경 반영이 어렵다: 빌드 시점 이후 데이터가 변해도 반영되지 않음.

코드 예시

// 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

빌드 시 생성된 데이터: {data.message}

;
}

👉 getStaticProps는 빌드 시점에만 실행되므로, 데이터가 자주 변하지 않는 페이지에 적합합니다.

---

3. SSR vs SSG 차이 비교

구분 SSR (Server Side Rendering) SSG (Static Site Generation)

HTML 생성 시점	요청 시마다 서버에서 생성	빌드 시점에 미리 생성
속도	첫 요청은 빠름, 요청이 많으면 서버 부하 발생	매우 빠름, CDN 캐싱 가능
데이터 갱신	요청마다 최신 데이터 반영	빌드 후 데이터 변경 반영 어려움
서버 의존성	서버 필요	서버 없이도 가능 (정적 배포)
활용 예시	뉴스, 날씨, 쇼핑몰 상품 페이지	블로그, 문서 사이트, 회사 소개 페이지

---

4. 혼합 사용: ISR(Incremental Static Regeneration)

Next.js는 SSR과 SSG의 장점을 결합한 ISR도 제공합니다. ISR은 정적으로 생성된 페이지를 일정 주기(revalidate)마다 다시 빌드해 최신 데이터를 반영할 수 있는 기능입니다.

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

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

👉 이 방식은 대부분의 페이지를 정적으로 처리하면서도 최신성을 보장할 수 있어, 블로그나 쇼핑몰 등에서 널리 사용됩니다.

---

5. 실무 활용 사례

• SSR 추천 상황
  • 로그인/사용자별 맞춤 데이터가 필요한 경우 (예: 마이페이지, 대시보드)
  • 검색엔진 최적화가 반드시 필요한 뉴스 기사 페이지
• SSG 추천 상황
  • 변하지 않는 콘텐츠가 많은 블로그, 문서 사이트
  • 회사 소개, 제품 소개와 같은 정적인 페이지
• ISR 추천 상황
  • 상품 정보처럼 자주 바뀌지만, 모든 요청마다 서버에서 생성할 필요는 없는 경우
  • 대규모 블로그나 커뮤니티 게시글 페이지

---

6. 마무리

Next.js는 단순히 React 앱을 만들 수 있는 프레임워크가 아니라, 다양한 렌더링 전략을 제공하는 풀스택 도구입니다.

• 데이터가 자주 바뀌고 사용자 맞춤화가 필요하다면 SSR
• 변하지 않는 콘텐츠가 많고 빠른 속도가 필요하다면 SSG
• 두 가지 장점을 절충하고 싶다면 ISR

상황에 맞는 방식을 선택하면 성능과 SEO, 그리고 개발 효율성까지 모두 챙길 수 있습니다. 앞으로 프로젝트를 설계할 때는 단순히 “React로 만든다”에서 한 걸음 더 나아가, Next.js의 렌더링 전략을 함께 고려해 보시길 권장합니다.