Next.js SSG 완벽 가이드

SSG란?

SSG(Static Site Generation)는 빌드 시점에 HTML을 미리 생성하는 렌더링 방식입니다. 서버 부하 없이 CDN에서 직접 제공할 수 있어 속도가 빠르고, SEO에 유리합니다.

Next.js App Router에서의 SSG

Next.js App Router는 기본적으로 서버 컴포넌트를 사용하며, 빌드 시 정적 생성이 가능합니다.

정적 페이지 만들기

// app/about/page.tsx
export default function AboutPage() {
  return <h1>About Us</h1>;
}

외부 데이터 없이 렌더링되는 페이지는 자동으로 정적 생성됩니다.

동적 라우트 정적 생성

// app/blog/[slug]/page.tsx
export function generateStaticParams() {
  return [
    { slug: 'hello-world' },
    { slug: 'nextjs-guide' },
  ];
}

export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  // slug를 기반으로 콘텐츠 로드
  return <article>{slug}</article>;
}

generateStaticParams로 빌드 시점에 생성할 경로를 지정합니다.

SSG에 적합한 사이트

• 블로그: 콘텐츠가 자주 바뀌지 않는 경우
• 문서 사이트: API 문서, 가이드
• 마케팅 페이지: 랜딩 페이지, 제품 소개
• 포트폴리오: 개인 웹사이트

성능 최적화 팁

1. next/image 사용: 자동 이미지 최적화
2. 폰트 최적화: next/font로 CLS 방지
3. 번들 분석: @next/bundle-analyzer로 번들 크기 확인
4. 메타데이터 API: SEO를 위한 generateMetadata 활용

Core Web Vitals 체크리스트

• LCP (Largest Contentful Paint): 2.5초 이내
• FID (First Input Delay): 100ms 이내
• CLS (Cumulative Layout Shift): 0.1 이하

SSG를 사용하면 서버 응답 시간이 거의 없기 때문에 LCP 개선에 큰 효과가 있습니다.