SSG vs SSR vs ISR — 블로그에 어울리는 렌더링 방식 고르기

Next.js는 다양한 렌더링 전략을 지원합니다. Static Generation(SSG), Server Side Rendering(SSR), 그리고 Incremental Static Regeneration(ISR).

하지만 각 방식이 언제, 왜 필요한지는 생각보다 헷갈릴 수 있어요. 이번 글에서는 3가지 렌더링 전략의 차이점과, 블로그에 어떤 방식이 가장 잘 어울리는지 실제 예시와 함께 정리해볼게요.

---

📦 1. SSG (Static Site Generation)

빌드 시점에 HTML을 생성해서 정적인 파일로 제공하는 방식입니다.

export async function getStaticProps() {
  const posts = await getPosts();
  return {
    props: { posts },
  };
}

장점:

• 📄 정적 HTML → 빠른 로딩 속도
• 📦 CDN 캐시로 서버 부담 ↓
• ✅ SEO에 매우 유리

단점:

• 🕓 자주 변경되는 데이터 반영 어려움
• 🔁 새 글 반영하려면 재빌드 필요

블로그 적합도: ⭐⭐⭐⭐⭐ 👉 자주 변경되지 않는 일반적인 블로그에 최적

---

🌐 2. SSR (Server Side Rendering)

요청이 올 때마다 HTML을 서버에서 동적으로 생성합니다.

export async function getServerSideProps(context) {
  const post = await getPostBySlug(context.params.slug);
  return {
    props: { post },
  };
}

장점:

• ⏱ 최신 데이터를 항상 반영
• 🔒 인증 기반 페이지에 유리

단점:

• 🐢 매 요청마다 서버 렌더링 → 느릴 수 있음
• 📈 트래픽이 많으면 서버 부담 ↑

블로그 적합도: ⭐⭐ 👉 관리 페이지, 로그인 기반 대시보드 등에 적합

---

⚡ 3. ISR (Incremental Static Regeneration)

SSG의 장점은 유지하면서, 설정한 시간 간격으로 페이지를 재생성합니다.

export async function getStaticProps() {
  const post = await getPost();
  return {
    props: { post },
    revalidate: 60, // 60초마다 재생성
  };
}

장점:

• 📄 정적 페이지의 빠른 속도 유지
• 🔁 주기적인 최신 데이터 반영 가능

단점:

• ⏳ 최초 요청 시 오래된 데이터일 수 있음

블로그 적합도: ⭐⭐⭐⭐ 👉 블로그에 새로운 글이 자주 올라온다면 최적

---

📊 비교 요약

구분	SSG	SSR	ISR
HTML 생성 시점	빌드 시	매 요청 시	빌드 후 일정 간격
속도	🚀 빠름	🐢 느림	🚀 빠름
실시간성	낮음	높음	중간
추천 대상	블로그	로그인 기반 페이지	업데이트 자주 되는 블로그

---

✅ 마무리하며

렌더링 방식은 단순한 설정이 아니라, 속도, 확장성, UX에 큰 영향을 주는 결정입니다.
블로그라면 일반적으로 SSG 또는 ISR이 가장 이상적이에요.

“글은 정적으로 쓰고, 경험은 동적으로 제공하자.”