SSG

SSG(Static Site Generation)는 빌드 타임에 모든 페이지의 HTML을 미리 생성하는 렌더링 방식입니다. 서버나 CDN에서 이미 완성된 HTML 파일을 직접 제공하기 때문에, 서버 연산이 필요 없어 매우 빠른 로딩 속도를 제공합니다.

Next.js의 getStaticProps, Gatsby의 GraphQL 쿼리, Astro의 정적 생성 등이 대표적인 SSG 구현 방식입니다. 빌드 시점에 데이터를 가져와 HTML에 포함시키므로, CMS나 API에서 데이터를 받아 정적 페이지로 변환할 수 있습니다.

SSG는 블로그, 문서 사이트, 마케팅 페이지처럼 콘텐츠가 자주 변경되지 않는 사이트에 이상적입니다. CDN에 캐싱하면 전 세계 어디서든 빠른 응답 시간을 보장하며, 서버 부하도 거의 없습니다.

ISR(Incremental Static Regeneration)을 사용하면 SSG의 장점을 유지하면서도 주기적으로 페이지를 재생성할 수 있습니다. revalidate 옵션으로 특정 시간마다 백그라운드에서 페이지를 업데이트하여 최신 데이터를 반영합니다.

복사

// Next.js SSG with getStaticProps
// pages/blog/[slug].tsx

interface Post {
  slug: string;
  title: string;
  content: string;
  publishedAt: string;
}

// 빌드 타임에 모든 경로 생성
export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts')
    .then(res => res.json());

  return {
    paths: posts.map((post: Post) => ({
      params: { slug: post.slug }
    })),
    fallback: 'blocking' // 새 경로는 SSR 후 캐시
  };
}

// 빌드 타임에 데이터 페칭
export async function getStaticProps({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
    .then(res => res.json());

  if (!post) {
    return { notFound: true };
  }

  return {
    props: { post },
    revalidate: 3600 // ISR: 1시간마다 재생성
  };
}

export default function BlogPost({ post }: { post: Post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.publishedAt}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// Astro SSG 예제
// src/pages/blog/[slug].astro
---
export async function getStaticPaths() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}

const { post } = Astro.props;
---

<article>
  <h1>{post.title}</h1>
  <Fragment set:html={post.content} />
</article>

SSR ISR Next.js Astro CDN

📄 Next.js 공식 문서 - Static Site Generation 📄 Astro 공식 문서 - Why Astro 📄 Gatsby - Build Process Overview