🌐 2. Next.js에서 `getServerSideProps` vs `getStaticProps`, 써보면서 헷갈렸던 거 정리

---

Next.js 쓰다 보면 페이지 단위로 데이터를 가져오는 방법이 2가지(SSR / SSG)인데,
맨날 헷갈려서 이번에 차이점이랑 언제 뭘 써야 하는지 정리해봤다.

---

✅ getServerSideProps (SSR)

요청이 들어올 때마다 서버에서 데이터를 가져와서 렌더링
즉, 매 요청마다 HTML을 새로 그린다

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

• 매번 서버에서 실행됨
• 데이터가 자주 바뀌는 페이지에 적합
• 다만 느릴 수 있음

---

✅ getStaticProps (SSG)

빌드 시 데이터를 가져와서 HTML을 미리 만들어둔다
유저가 접속할 땐 이미 만들어진 정적 페이지를 보여줌

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

• 정적으로 빠르게 보여줄 수 있음
• 다만, 최신 데이터가 필요할 땐 좀 불편함

---

✅ ISR (Incremental Static Regeneration)

SSG의 단점 보완용. 일정 시간마다 정적 페이지를 재생성

export async function getStaticProps() {
  const data = await fetchData();

  return {
    props: { data },
    revalidate: 10, // 10초마다 페이지 재생성
  };
}

이 기능 덕분에 "거의 정적이지만 어느 정도 실시간 느낌"도 낼 수 있다.

---

✅ 비교 정리

항목	SSR (getServerSideProps)	SSG (getStaticProps)
실행 시점	매 요청마다	빌드 타임
속도	느릴 수 있음	빠름
최신 데이터	항상 최신	필요 시 ISR로 갱신 가능
적합한 경우	로그인, 마이페이지 등	블로그, 공지사항 등 정적인 페이지

---

📝 내가 느낀 점

Next.js는 진짜 렌더링 전략이 다양해서 좋긴 한데,
한편으론 언제 뭘 써야 할지 애매할 때가 많았다.
이번 정리를 통해서 프로젝트 상황에 맞게 SSR, SSG, ISR을 선택할 수 있는 기준이 생긴 것 같다.

---

"모든 페이지에 SSR을 쓰는 건 비효율적일 수 있다. 정적일 수 있는 건 정적으로!"