SSG (Static Site Generation)란?

SSG(Static Site Generation)는 웹사이트를 빌드할 때 미리 HTML 파일을 생성하여 제공하는 방식

서버에서 동적으로 HTML을 생성하는 SSR(Server-Side Rendering)과 달리, SSG는 정적인 HTML을 미리 만들어서 배포 속도가 빠르고 서버 부하가 적은 것이 특징

✔ SSG의 특징

✅ 미리 생성된 정적 HTML 제공 → 빠른 로딩 속도
✅ CDN 캐싱 최적화 가능 → 트래픽이 많아도 안정적
✅ 서버가 필요 없거나 최소한의 리소스만 사용
✅ 데이터가 자주 바뀌지 않는 페이지에 적합

✔ SSG vs SSR vs CSR 비교

✔ SSG를 지원하는 대표적인 프레임워크

• Next.js (getStaticProps, getStaticPaths 활용)
• Gatsby (GraphQL로 데이터 페칭)
• Hugo, Jekyll (Markdown 기반 정적 사이트 생성기)

📌 Next.js에서 SSG 예제

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

  return {
    props: { data }, // 이 데이터가 빌드 시 HTML에 포함됨
  };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

export default Page;

→ getStaticProps를 사용하면 빌드 시 API 데이터를 받아 정적인 HTML을 생성

✔ SSG를 언제 사용해야 할까?

✅ SEO가 중요한 페이지 (블로그, 문서 사이트, 마케팅 페이지)
✅ 데이터가 자주 변경되지 않는 경우 (예: 제품 페이지, 도움말 페이지)
✅ 빠른 로딩 속도가 필요한 경우

하지만 데이터가 실시간으로 자주 변경되는 경우(예: 댓글, 사용자 대시보드)는 SSR이나 CSR이 더 적합