Next.js의 두 가지 사전 렌더링 방식

Next.js는 React 프레임워크로, 사전 렌더링(Pre-rendering)을 기본 제공합니다. 사전 렌더링은 모든 페이지를 클라이언트 측 JavaScript로 렌더링하는 대신, HTML을 미리 생성하는 방식입니다.

사전 렌더링의 두 가지 형태

Next.js에는 두 가지 형태의 사전 렌더링이 있습니다:

정적 생성(Static Generation)
서버 사이드 렌더링(Server-side Rendering)

이 둘의 주요 차이점은 HTML을 생성하는 시점에 있습니다.

정적 생성 (Static Generation)

출처: https://nextjs.org/ 정적 생성은 빌드 시점에 HTML을 생성하는 방식입니다. 이렇게 생성된 HTML은 CDN에 캐시되어 각 요청마다 재사용됩니다.

jsx

// 정적 생성 예제 (데이터가 있는 경우)
export async function getStaticProps() {
  const data = await fetchData();
  return {
    props: { data },
  };
}

function BlogPost({ data }) {
  return <div>{data.title}</div>;
}

export default BlogPost;

서버 사이드 렌더링 (Server-side Rendering)

출처: https://nextjs.org/

서버 사이드 렌더링은 각 요청마다 서버에서 HTML을 생성하는 방식입니다. 각 요청마다 최신 데이터로 페이지를 렌더링합니다.

jsx

// 서버 사이드 렌더링 예제
export async function getServerSideProps(context) {
  const data = await fetchData(context.params);
  return {
    props: { data },
  };
}

function DynamicPage({ data }) {
  return <div>{data.content}</div>;
}

export default DynamicPage;

유연한 선택 가능

Next.js의 중요한 특징은 각 페이지별로 렌더링 방식을 선택할 수 있다는 점입니다. 대부분의 페이지에는 정적 생성을 사용하고 일부 페이지에만 서버 사이드 렌더링을 사용하는 "하이브리드" Next.js 애플리케이션을 구축할 수 있습니다.

렌더링 방식 선택 가이드

특성	정적 생성	서버 사이드 렌더링
생성 시점	빌드 시	요청 시
성능	매우 빠름 (CDN 캐싱)	중간 (매 요청마다 생성)
데이터 최신성	재배포 필요	항상 최신 상태
적합한 사례	마케팅 페이지, 블로그, 제품 목록	개인화된 대시보드, 실시간 데이터

올바른 렌더링 전략을 선택하는 것이 성능과 사용자 경험에 큰 영향을 미칠 수 있습니다.