SSG vs SSR in Next.js: 정적 생성과 서버 사이드 렌더링의 차이점과 적용 사례

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있는 도구를 제공합니다. 이 두 가지 렌더링 방식은 각각의 장단점과 사용 사례가 다릅니다. 이번 글에서는 이 두 가지 렌더링 방식의 차이점과 실제 적용 사례를 살펴보겠습니다.

Static Site Generation (SSG)

Static Site Generation(SSG)은 빌드 타임에 HTML 파일을 생성하는 방식입니다. 이를 통해 최대한의 성능을 얻을 수 있으며, 정적인 콘텐츠를 미리 렌더링하여 제공하기 때문에 페이지 로딩 속도가 매우 빠릅니다. 어떠한 백엔드 서버 없이도 정적 파일을 배포할 수 있어 비용 절감에도 큰 도움이 됩니다.

특징

• 빠른 로딩 속도: 미리 생성된 정적 파일을 제공하므로 로딩 속도가 빠릅니다.
• SEO 친화적: 검색 엔진 최적화(SEO)에도 유리합니다. 모든 콘텐츠가 빌드 타임에 생성되기 때문에 검색 엔진이 쉽게 크롤링 할 수 있습니다.
• 보안: 서버 없이 정적 파일만 제공하므로, 웹 서버의 보안 취약점을 줄일 수 있습니다.

사용 사례

• 정적 블로그 또는 문서 사이트: 자주 변경되지 않는 콘텐츠로 구성된 블로그나 문서 사이트에 적합합니다. 예를 들어, 개인 블로그, 회사의 기술 문서 사이트 등이 이에 해당됩니다.
• 마케팅 페이지: 특정 이벤트나 프로모션을 알리기 위한 사이트. 예를 들어, 제품 런칭 페이지와 같은 단일 페이지 애플리케이션(SPA)입니다.

javascript
// pages/index.js
export async function getStaticProps() {
  const data = await fetchData(); // 데이터를 가져오는 함수
  return {
    props: { data }, // 빌드 타임에 데이터 전달
  };
}

const HomePage = ({ data }) => {
  return (
    <div>
      <h1>Homepage</h1>
      <p>{data.description}</p>
    </div>
  );
};

export default HomePage;

Server-Side Rendering (SSR)

Server-Side Rendering(SSR)은 페이지 요청 시 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식입니다. 매 요청마다 서버에서 새 HTML을 만들어 반환하므로 최신 데이터를 항상 보여줄 수 있지만, 서버의 부하가 높은 단점이 있을 수 있습니다.

특징

• 실시간 데이터: 요청 시마다 최신 데이터를 제공할 수 있어, 실시간으로 변하는 데이터에 적합합니다.
• SEO 친화적: 최초 페이지 로딩 시 서버에서 모든 HTML을 렌더링하여 보내므로, SEO에 유리합니다.
• 복잡한 로직 처리: 서버 사이드에서 복잡한 연산이나 데이터 처리를 할 수 있습니다.

사용 사례

• 커머스 사이트: 제품 정보와 재고 상태가 실시간으로 변할 수 있는 쇼핑몰 사이트에 적합합니다. 사용자의 요청마다 최신 정보를 반영할 수 있습니다.
• 소셜 미디어 플랫폼: 사용자 간 실시간 상호작용이 필요한 소셜 미디어 애플리케이션에 유리합니다.

javascript
// pages/product/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://api.example.com/products/${id}`);
  const product = await res.json();

  return {
    props: { product }, // 서버에서 데이터 전달
  };
}

const ProductPage = ({ product }) => {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: {product.price}</p>
    </div>
  );
};

export default ProductPage;

결론

Next.js에서 제공하는 SSG와 SSR은 각각의 장단점을 가지고 있으며, 필요한 경우 혼합하여 사용할 수도 있습니다. SSG는 정적 콘텐츠와 빠른 로딩 속도에 적합하며, SSR은 실시간 데이터와 복잡한 로직을 처리하는 데 강점이 있습니다. 프로젝트의 요구에 맞게 이 두 가지 방식 중 하나를 선택하거나, 필요에 따라 혼합하여 효율적인 웹 애플리케이션을 구축할 수 있습니다.