[Next.js] getStaticProps vs getServerSideProps 완벽 비교

[Next.js] getStaticProps vs getServerSideProps 완벽 비교

Next.js는 페이지 단위로 데이터 패칭 전략을 선택할 수 있습니다.
그중 가장 자주 쓰이는 함수는 getStaticProps와 getServerSideProps입니다.

이번 글에서는 두 함수의 차이점과 선택 기준을 예제와 함께 정리해봅니다.

---

✅ 1. getStaticProps - 정적 생성 (SSG)

getStaticProps는 빌드 타임에 데이터를 가져와 정적 HTML을 생성합니다.
한 번 빌드하면 그 내용은 CDN에 배포되며, 모든 유저가 동일한 HTML을 받습니다.

export async function getStaticProps() {
  const data = await fetchData(); // API 호출 등
  return {
    props: {
      data
    }
  };
}

• 페이지 속도가 매우 빠름 (정적 HTML)
• 변하지 않는 콘텐츠에 적합 (블로그, 마케팅 페이지 등)
• 배포 전 데이터가 준비되어 있어야 함

---

✅ 2. getServerSideProps - 서버 사이드 렌더링 (SSR)

getServerSideProps는 요청이 올 때마다 서버에서 HTML을 생성합니다.
항상 최신 데이터를 반영해야 할 때 유용합니다.

export async function getServerSideProps(context) {
  const data = await fetchData();
  return {
    props: {
      data
    }
  };
}

• 항상 최신 데이터 제공
• 로그인/세션 기반 페이지에 적합
• 매 요청마다 서버 로딩이 필요 → 성능 이슈 주의

---

✅ 3. 선택 기준 비교

항목	getStaticProps	getServerSideProps
렌더링 시점	빌드 타임	요청 시마다
페이지 속도	매우 빠름	느릴 수 있음
최신 데이터	불가능 (단, ISR 활용 가능)	가능
캐싱	CDN 활용 가능	불가능 (서버 요청 필요)
적합한 용도	정적인 블로그, 제품 소개	로그인, 실시간 대시보드

---

✅ 4. 예제 비교

// SSG
export async function getStaticProps() {
  const post = await getPostData();
  return { props: { post } };
}

// SSR
export async function getServerSideProps() {
  const user = await getUserData();
  return { props: { user } };
}

동일한 UI라도 데이터 성격에 따라 SSG or SSR 중 선택할 수 있습니다.

---

📌 마무리

getStaticProps는 빠르고 캐싱에 유리하며, getServerSideProps는 실시간성에 강점이 있습니다.

프로젝트 요구사항에 따라 렌더링 전략을 고르면 퍼포먼스와 UX를 모두 잡을 수 있습니다.