[Next.js14 강의] 12강 - getStaticProps와 getServerSideProps의 차이점

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Next.js의 두 가지 데이터 Fetching 메서드인 getStaticProps와 getServerSideProps의 차이점을 이해합니다. 이를 통해 각 메서드가 적합한 사용 시나리오와 장단점을 비교하고, 프로젝트에 적절한 데이터를 가져오는 방법을 선택할 수 있도록 합니다.

 

 

1. Next.js의 데이터 Fetching 메서드 이해하기

Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 모두 지원하며, 이 두 가지 방식을 구현하기 위해 각각의 데이터 Fetching 메서드를 제공합니다.

 

getStaticProps (SSG: 정적 사이트 생성)

빌드 시점에 데이터를 Fetching하여 정적 페이지를 생성합니다. 이 방식은 페이지가 빌드될 때 한 번만 실행되며, 이후에는 정적 HTML 파일이 제공됩니다.

반응형

getServerSideProps (SSR: 서버사이드 렌더링)

각 요청마다 서버에서 데이터를 Fetching하여 페이지를 생성합니다. 즉, 사용자가 페이지를 요청할 때마다 새로운 HTML이 서버에서 생성되어 전달됩니다.

 

 

2. getStaticProps 사용법과 특징

 

사용법

getStaticProps는 정적 사이트 생성(SSG)을 위해 사용됩니다. 빌드 시점에 미리 데이터를 가져와 정적인 HTML을 생성하므로, 페이지 로딩 속도가 매우 빠릅니다.

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

  return {
    props: { post },
    revalidate: 10, // 선택사항: ISR을 위해 데이터 갱신 주기 설정 (단위: 초)
  };
}

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 };
}

728x90

특징

· 정적 HTML 생성: 빌드 시점에 HTML을 미리 생성하여 CDN에 배포합니다.
· 빠른 페이지 로딩: 정적인 HTML 파일을 제공하므로 로딩 속도가 빠릅니다.
· 빌드 시점에만 실행: 데이터가 자주 변경되지 않는 경우에 적합합니다.
· ISR (Incremental Static Regeneration) 지원: revalidate 옵션을 사용하여 일정 주기마다 데이터를 재생성할 수 있습니다.

 

장단점

· 장점: 빠른 초기 로딩 속도, CDN을 통한 전역 배포로 성능 최적화, 비용 효율적.
· 단점: 데이터가 자주 변경되는 경우 실시간 데이터 반영이 어렵고, 빌드 시간이 길어질 수 있음.

 

 

3. getServerSideProps 사용법과 특징

 

사용법

getServerSideProps는 서버사이드 렌더링(SSR)을 위해 사용됩니다. 각 요청마다 데이터를 가져와 페이지를 렌더링하므로, 항상 최신 데이터를 제공합니다.

// pages/profile.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user/profile');
  const profile = await res.json();

  return {
    props: { profile },
  };
}

 

 

특징

· 요청 시마다 실행: 사용자가 페이지를 요청할 때마다 서버에서 새로운 HTML이 생성됩니다.
· 최신 데이터 제공: 페이지를 로드할 때마다 최신 데이터를 받아올 수 있어 실시간 데이터가 필요한 페이지에 적합합니다.
· SEO 최적화: 서버사이드에서 HTML이 생성되므로, 검색 엔진에 대한 최적화가 가능합니다.

 

장단점

· 장점: 항상 최신 데이터를 제공하며, 사용자 맞춤형 데이터나 실시간 데이터를 반영할 수 있음.
· 단점: 매 요청마다 서버에서 렌더링하므로 초기 로딩 속도가 느릴 수 있고, 서버 부하가 증가할 수 있음.

 

 

4. getStaticProps와 getServerSideProps의 주요 차이점 비교

SMALL

속성	getStaticProps (SSG)	getServerSideProps (SSR)
실행 시점	빌드 시점에 한 번 실행	각 요청 시마다 실행
사용 사례	데이터가 자주 변하지 않는 정적 페이지	최신 데이터가 필요한 페이지
페이지 로딩 속도	매우 빠름 (정적 파일 제공)	느림 (서버에서 매번 렌더링)
SEO	좋음 (정적 HTML 제공)	좋음 (서버에서 완전한 HTML 제공)
유지보수	데이터가 변하지 않는 경우 쉬움	서버 리소스 관리 필요
데이터 갱신	revalidate 옵션을 통한 점진적 정적 재생성(ISR) 지원	항상 최신 데이터 제공
서버 부하	낮음 (정적 파일 제공)	높음 (매 요청마다 서버에서 렌더링)

 

 

5. 각 메서드의 사용 사례

 

getStaticProps 사용이 적합한 경우

· 정적 블로그, 마케팅 페이지, 제품 설명 페이지 등과 같이 데이터가 자주 변경되지 않는 경우.
· 매우 빠른 로딩 속도가 요구되는 경우.
· 특정 시간 간격으로 데이터가 갱신될 수 있는 경우 (ISR).

 

getServerSideProps 사용이 적합한 경우

· 사용자 맞춤형 데이터가 필요한 페이지 (예: 사용자 프로필 페이지).
· 실시간 데이터를 요구하는 대시보드나 통계 페이지.
· 외부 API의 빈번한 변경이 있는 경우.

 

 

6. 데이터 Fetching 방법 결정하기

 

프로젝트 요구사항에 따라 선택하기

· 데이터 갱신 빈도와 사용자 경험에 맞춰 getStaticProps 또는 getServerSideProps를 선택합니다.
· 복합적인 요구사항이 있는 경우, 두 메서드를 혼합하여 사용할 수 있습니다.

혼합 사용의 예

블로그 사이트의 경우, 최신 게시글 목록 페이지는 getServerSideProps로 렌더링하고, 개별 블로그 포스트 페이지는 getStaticProps를 사용하여 정적으로 생성할 수 있습니다.

이번 강의에서는 Next.js의 getStaticProps와 getServerSideProps의 차이점을 이해하고, 각 메서드가 적합한 사용 시나리오를 알아보았습니다. 두 메서드를 올바르게 활용하여 최적의 성능과 사용자 경험을 제공하는 것이 중요합니다.

 

 

 

 

 

- 이전 수업 목록