11. SSG (정적 사이트 생성) – Next.js에서의 정적 사이트 생성과 사용

 웹사이트의 성능과 SEO 최적화를 고려할 때, **정적 사이트 생성(SSG, Static Site Generation)**은 매우 중요한 기술입니다. 이번 글에서는 Next.js에서 정적 사이트 생성을 어떻게 구현할 수 있는지, 그리고 이 방식이 왜 중요한지에 대해 알아보겠습니다.

1. 정적 사이트 생성(SSG)란?

**정적 사이트 생성(SSG)**은 웹 페이지의 HTML을 빌드 시점에 미리 생성해 두고, 클라이언트에서 요청할 때마다 빠르게 전달하는 방식입니다. 이는 **서버 사이드 렌더링(SSR)**과 비교했을 때, 서버에 부담을 덜어주고, 페이지를 즉시 로드할 수 있는 장점이 있습니다. 또한, 정적으로 생성된 HTML 파일은 CDN(콘텐츠 전송 네트워크)을 통해 빠르게 제공되므로, 사이트 속도가 매우 빠릅니다.

2. Next.js에서 SSG 사용하기

Next.js는 정적 사이트 생성을 간편하게 사용할 수 있도록 getStaticProps와 getStaticPaths라는 두 가지 메서드를 제공합니다. 이를 통해 데이터를 미리 가져와 정적 HTML 파일을 빌드 시점에 생성할 수 있습니다.

예시: SSG 페이지 만들기

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

  return {
    props: { posts }, // 페이지 컴포넌트의 props로 데이터 전달
  };
}

export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

위 코드에서 getStaticProps 함수는 빌드 시점에 실행되어 API에서 데이터를 가져오고, 이 데이터를 컴포넌트에 전달합니다. 이렇게 하면 페이지가 빌드될 때 HTML이 미리 생성되며, 클라이언트는 그 HTML을 빠르게 렌더링할 수 있습니다.

3. getStaticPaths를 사용한 동적 경로 처리

동적 경로를 가진 페이지에서도 SSG를 사용할 수 있습니다. 예를 들어, 블로그 글이 여러 개 있을 때, 각 블로그 글의 상세 페이지를 정적으로 생성하려면 getStaticPaths와 getStaticProps를 함께 사용해야 합니다.

예시: 동적 경로와 SSG 사용하기

// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

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>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

위 코드에서 getStaticPaths는 모든 동적 경로를 미리 생성하고, getStaticProps는 각 동적 경로에 해당하는 데이터를 가져옵니다. 이 방식으로 동적 경로의 페이지도 빌드 시점에 정적으로 생성할 수 있습니다.

4. SSG의 장점

1. 빠른 로딩 속도: 정적으로 생성된 HTML은 서버에서 렌더링하지 않고, 미리 생성된 파일을 클라이언트에 전달하기 때문에 매우 빠르게 로드됩니다.
2. SEO 최적화: 서버에서 미리 렌더링된 HTML을 제공하기 때문에, 검색 엔진이 페이지 내용을 쉽게 크롤링할 수 있어 SEO에 유리합니다.
3. 서버 부담 감소: SSG는 서버에서 렌더링을 하지 않으므로, 서버에 대한 부담을 줄이고, 트래픽이 많아도 안정적인 성능을 유지할 수 있습니다.

5. SSG와 다른 렌더링 방식의 비교

• SSG: 페이지를 빌드 시점에 미리 렌더링하고 정적 HTML로 제공. 빠른 로딩과 SEO 최적화에 유리.
• SSR: 페이지를 요청할 때마다 서버에서 렌더링하고 HTML을 제공. 동적 데이터가 필요한 페이지에 유리.
• CSR: 클라이언트에서 JavaScript를 실행하여 렌더링. 초기 로딩 속도가 느릴 수 있지만, 이후 페이지 전환은 빠름.

6. 결론

**정적 사이트 생성(SSG)**은 웹 애플리케이션의 성능을 극대화하고, SEO 최적화에 매우 효과적인 방법입니다. Next.js에서는 getStaticProps와 getStaticPaths를 통해 손쉽게 SSG를 구현할 수 있으며, 이를 통해 미리 생성된 정적 HTML 파일을 클라이언트에 빠르게 전달할 수 있습니다. SSG를 활용하면 웹사이트의 로딩 속도를 개선하고, SEO 성능을 높일 수 있습니다.