[Next] 정적 사이트 생성(SSG: Static-Site Generation)의 주요 개념과 코드 예시

minimanimo·2024년 11월 27일

Next.js

목록 보기

6/8

서버 사이드 렌더링(SSR)에 대한 기본적인 이해가 필요합니다. 이전 포스트인 서버 사이드 렌더링의 주요 개념과 코드 예시를 먼저 참고하시길 권장드립니다.

🎁 서버 사이드 렌더링(SSR)의 단점

서버 사이드 렌더링(SSR:Server-Side Rendering)은 사용자의 요청이 들어올 때마다 서버에서 HTML을 생성하는 방식입니다. 이 방식은 동적 데이터를 실시간으로 반영할 수 있다는 장점이 있지만, 몇 가지 한계가 있습니다.

1. 서버 부하 증가
서버가 요청마다 HTML을 생성하므로, 트래픽 증가시 서버 부담이 커집니다.

2. 비용 증가
1과 연결되는 내용으로 서버 자원이 많이 사용되어 인프라 비용이 높아질 수 있습니다.

3. 응답 시간 지연
서버에서 HTML을 생성하는 시간이 필요해 페이지 로딩 속도가 느려질 수 있습니다.

4. SEO에 간접적인 한계
서버 부하로 인해 페이지 로드 시간이 길어지면 Core Web Vitals가 낮아져 SEO에 부정적 영향을 끼칠 가능성이 있습니다.

5. 안정성 문제
서버 장애 발생 시 즉시 페이지 제공이 어렵습니다.

Core Web Vitals : Google이 웹사이트의 사용자 경험(UX)을 평가하기 위해 정의한 세 가지 주요 웹 성능 지표. 웹 페이지의 로딩 속도, 인터랙션 품질, 시각적 안정성이 해당 지표.

🎁 정적 사이트 생성(SSG)의 개념

정적 사이트 생성(SSG: Static-Site Generation)은 빌드 시점에 HTML을 미리 생성하여 정적 파일로 배포하는 렌더링 방식입니다. 사용자는 서버 요청 없이도 미리 생성된 HTML 파일을 즉시 확인할 수 있어 빠른 로딩 속도와 SEO 최적화를 동시에 달성할 수 있습니다.

🎀 정적 사이트 생성(SSG)의 장점

1. 서버 부하 감소
빌드 시 HTML을 미리 생성하여 정적 파일로 제공하므로 서버 요청이 줄어듭니다.

2. 비용 절감
서버 부담이 적어 인프라 비용이 감소합니다.

3. 빠른 로딩 속도
정적 파일은 CDN에서 바로 제공되기 때문에 빠른 페이지 로딩이 가능합니다.

4. SEO 최적화
미리 생성된 HTML을 즉시 제공하므로 SEO 점수와 Core Web Vitals 개선.

5. 높은 안정성
정적 파일이므로 서버 장애 시에도 CDN을 통해 안정적으로 제공 가능.

CDN(Content Delivery Network) : 전 세계에 분산된 서버 네트워크를 통해 웹 콘텐츠를 사용자에게 빠르게 전달하는 시스템. 사용자가 웹사이트에 접속할 때, 가까운 서버에서 콘텐츠를 제공하여 로딩 속도를 단축하고, 트래픽 부하를 분산시킴.

🎁 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 코드 비교

🎀 SSR 코드 예시

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/posts/${context.params.id}`);
  const post = await res.json();
  return { props: { post } };
}

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

🎀 SSG 코드 예시

export async function getStaticPaths() {
  return {
        paths: [
            { params: { id: "1" } },
            { params: { id: "2" } },
            { params: { id: "3" } },
        ],
        fallback: true,
    }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();
  return { props: { post } };
}

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

정적 HTML로 미리 생성되므로 빠른 로딩과 비용 절감 가능.
/post/[id].tsx 같은 동적 경로는 getStaticPaths()로 사전 정의 필요.

📍 fallback 옵션 설명

false: getStaticPaths()에 미리 정의된 경로 외에는 404 페이지로 이동.
blocking: 요청 시 즉시 HTML 생성. 생성 중 화면이 비어 있을 수 있음.
true: 초기 빈 페이지 반환 후, props 로딩 완료 시 콘텐츠 업데이트.
useRouter().isFallback으로 로딩 상태 표시 가능.
데이터가 없으면 notFound: true 반환 → 404 페이지 이동.

📍 빌드 결과

빌드 결과

.next/server/pages 폴더에 정적 HTML 파일 생성.

🎁 정적 사이트 생성(SSG)의 단점

1. 빌드 시간 증가
페이지 수가 많을 경우, 빌드 시간이 길어져 배포 주기가 길어질 수 있습니다.

2. 동적 콘텐츠 처리 어려움
실시간 데이터나 사용자 맞춤형 콘텐츠를 제공하는 데 한계가 있습니다. 이 경우, SSR이나 CSR과 결합하여 해결해야 할 수 있습니다.

3. 초기 페이지 로딩 후 데이터 갱신 어려움
콘텐츠가 정적으로 생성되므로, 이후에 콘텐츠가 업데이트되면 다시 빌드해야 합니다. 실시간 데이터 갱신이 필요한 경우에는 별도의 처리 방법이 필요합니다.

이러한 문제를 개선하기 위한 방안으로, 다음 블로그에는 정적 사이트 생성(SSG)의 확장판인 "증분 정적 재생성 (ISR)" 에 대해서 설명하도록 하겠습니다.

🎁 결론

정적 사이트 생성(SSG)은 서버 사이드 렌더링(SSR)의 성능 한계를 해결하며, 페이지 로딩 속도, SEO 최적화, 비용 효율성을 동시에 개선하는 강력한 렌더링 방식입니다. getStaticPaths()와 fallback 옵션을 적절히 활용하면 동적 라우팅을 효율적으로 처리하고, 빠르고 안정적인 사용자 경험을 제공할 수 있습니다. SSG를 통해 고성능의 웹사이트를 구축하고 SEO 점수를 높여보세요.