[Next.js] getStaticProps와 getServerSideProps, Next.js가 데이터에 진심인 이유

“데이터는 언제 불러와야 하지?”
“초기 로딩 화면이 자꾸 비어 있다…”
“검색엔진에 내 콘텐츠가 안 보인다…”

 

React로 웹 애플리케이션을 만들면서 이런 경험을 한 적이 있다면, 지금부터 소개할 내용이 반가울 것이다.

 

Next.js의 getStaticProps와 getServerSideProps는 이 모든 고민에 대한 실질적인 해답이다.

 

 

 

📦 데이터 패칭이란 무엇인가?

 

웹 페이지는 단순히 HTML과 CSS만으로 이루어지지 않는다.

 

사용자에게 보여주는 대부분의 정보는 외부에서 불러온 데이터를 바탕으로 동적으로 구성된다.

 

이 데이터를 서버나 API로부터 가져오는 과정을 바로 데이터 패칭(data fetching)이라고 한다.

 

 

예를 들어 블로그 페이지를 만든다고 가정해보자.

 

글 목록, 작성자 정보, 댓글 등은 모두 서버에 저장되어 있으며, 브라우저가 페이지를 불러올 때 이 데이터들도 함께 가져와야 한다.

text
복사편집
브라우저 → 서버(API) → 데이터 요청 → 응답(JSON) → 화면에 렌더링

 

이처럼 "사용자에게 보여줄 데이터를 언제, 어디서, 어떤 방식으로 가져올 것인가"를 결정하는 일이 바로 데이터 패칭이다.

 

그리고 이 선택은 단순한 기술 구현을 넘어, 페이지 속도, 사용자 경험, 검색엔진 노출(SEO)에까지 큰 영향을 준다.

 

 

 

왜 데이터 패칭이 이렇게 어렵게 느껴졌을까?

 

React는 뷰(View)를 위한 라이브러리이다. 즉, UI를 구성하는 데 최적화되어 있지만 언제/어디서 데이터를 가져올지에 대한 명확한 기준은 없다.

그래서 우리는 다음과 같은 방식으로 코드를 작성한다.

// React 컴포넌트 내부
useEffect(() => {
  fetch('/api/data')
    .then((res) => res.json())
    .then(setData);
}, []);

 

이 방식은 간단하지만 문제도 명확하다.

• 🔸 SEO에 불리하다: 페이지 HTML이 비어 있는 상태에서 로딩되므로, 검색엔진이 콘텐츠를 인식하지 못할 수 있다.
• 🔸 초기 렌더가 빈 화면이다: 사용자가 들어왔을 때 데이터가 오기 전까지 아무것도 보이지 않는다.
• 🔸 UX가 떨어진다: 로딩 스피너만 잠깐 보이고 콘텐츠가 갑자기 등장하는 구조는 사용자 입장에서 어색하다.

 

 

 

Next.js는 다르다 – 페이지 단위의 데이터 패칭

 

Next.js는 이러한 문제를 프레임워크 차원에서 해결하려고 한다.

 

각각의 페이지 안에서 데이터를 어떻게 가져올지 명시할 수 있고, Next.js는 그 의도를 바탕으로 렌더링 전략을 자동으로 결정한다.

 

바로 이때 등장하는 것이 getStaticProps와 getServerSideProps이다.

 

 

 

🔒 getStaticProps: 정적으로 빠르고 똑똑하게

// pages/about.tsx

export async function getStaticProps() {
  const res = await fetch('<https://api.example.com/departments/hics>');
  const department = await res.json();

  return {
    props: {
      department,
    },
  };
}

• 📌 언제 실행되나?
  → 빌드 타임 (배포 시 한 번만 실행)
• 💡 언제 쓰면 좋을까?
  예) 블로그 글, 회사 소개, 학부 전공 정보, 공지사항
  → 내용이 자주 바뀌지 않고, 모든 사용자에게 동일한 결과를 보여줄 때
• 🌟 실제 시나리오 예시
  : 한동대학교 웹사이트를 만든다고 가정하자.
  -> /departments/hics 페이지에는 컴퓨터공학심화전공의 교수진, 커리큘럼, 졸업 요건이 소개된다. 이 정보는 자주 바뀌지 않기 때문에, getStaticProps를 사용해 HTML을 미리 만들어 놓고 빠르게 서빙하면 된다.
• ✅ 장점 요약
  • 빠른 로딩 속도 (CDN 활용 가능)
  • SEO 최적화
  • 서버 부하 없음 (HTML 미리 생성)

 

 

 

🔁 getServerSideProps: 요청마다 실시간으로

// pages/my-missions.tsx

export async function getServerSideProps(context) {
  const userId = context.req.cookies.user_id;
  const res = await fetch(`https://api.teamcc.io/missions?user=${userId}`);
  const missions = await res.json();

  return {
    props: {
      missions,
    },
  };
}

• 📌 언제 실행되나?
  → 요청 시마다 서버에서 실행
• 💡 언제 쓰면 좋을까?
  예) 대시보드, 실시간 순위표, 로그인한 사용자의 정보
  → 사용자마다 다른 내용을 보여줘야 하거나, 데이터가 자주 바뀔 때
• 🌟 실제 시나리오 예시
  : 팀CC 자동화 시스템에서 /my-missions 페이지는 로그인한 사용자별로 다른 미션 리스트를 보여줘야 한다. 이때 getServerSideProps를 사용하면 요청 시점에 해당 사용자 데이터만 서버에서 불러와 페이지를 구성할 수 있다.
• ✅ 장점 요약
  • 사용자별 데이터 실시간 반영
  • 검색엔진도 완성된 HTML을 인식
  • 보안상 민감한 데이터는 클라이언트에 노출되지 않음

 

 

 

프레임워크가 대신해주는 것들

 

React에서는 위 기능을 구현하려면 다음과 같은 일이 필요하다:

• Express 서버를 직접 구성하고
• 클라이언트와 서버 상태를 나누어 관리하며
• 요청과 렌더링 타이밍을 수동으로 조절해야 한다

Next.js에서는?

• ✅ 페이지 안에 함수 하나만 작성
• ✅ 데이터 패칭 방식만 명시하면 나머지는 프레임워크가 자동 처리
• ✅ CSR/SSR/SSG 전략을 알아서 판단하고 최적화

Next.js는 단순히 "React 위에 얹은 SSR 기능"이 아니라, 데이터 패칭까지 일관된 방식으로 관리하는 프레임워크이다.

 

 

 

결론: 복잡한 고민을 줄여주는 똑똑한 동료

 

React는 자유롭다.

하지만 때로는 “너무 자유롭기 때문에 혼란스럽다.”

 

Next.js는 그 자유 속에서 정돈된 가이드라인을 제공하는 프레임워크다.

getStaticProps, getServerSideProps만 잘 이해해도 SEO, 속도, 개발 편의성까지 모두 챙길 수 있다.

 

React로 자유롭게 개발하다가 고민이 많아졌다면,

Next.js는 당신의 가장 실용적인 동료가 되어줄 것이다.