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

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

사전 렌더링의 두 가지 형태

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

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

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

정적 생성 (Static Generation)

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

// 정적 생성 예제 (데이터가 있는 경우)
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을 생성하는 방식입니다. 각 요청마다 최신 데이터로 페이지를 렌더링합니다.

// 서버 사이드 렌더링 예제
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 애플리케이션을 구축할 수 있습니다.

렌더링 방식 선택 가이드

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