[Next.js] SSG, CSR, SSR 비교 및 props 형태 정리

Next.js에서 SSG vs CSR vs SSR 및 props 형태 정리

프론트엔드 성능, 사용자 경험, SEO를 모두 고려한 선택을 위해 렌더링 방식과 데이터 패칭 방식을 정확히 이해해야 함
Next.js는 대표적으로 다음 3가지 렌더링 방식을 제공

---

1️⃣ SSG (Static Site Generation)

• 사용 함수: getStaticProps
• 실행 시점: 빌드 타임에 한 번
• HTML 생성 위치: 서버 → 정적 파일로 저장
• 특징:
  • 빠른 로딩 속도 (CDN 활용)
  • SEO에 최적화됨
  • 데이터가 자주 바뀌지 않는 페이지에 적합

---

사용 예시

export const getStaticProps = async () => {
  const data = await fetchData();
  return { props: { data } };
};

---

2️⃣ SSR (Server Side Rendering)

• 사용 함수: getServerSideProps
• 실행 시점: 모든 요청마다
• HTML 생성 위치: 요청마다 서버에서 동적 생성
• 특징:
  • 항상 최신 데이터를 렌더링
  • 초기 로딩 속도는 SSG보다 느림
  • 로그인, 실시간 데이터 같은 민감한 콘텐츠에 적합

---

사용 예시

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

---

3️⃣ CSR (Client Side Rendering)

• 사용 함수: 없음 (useEffect, fetch 등 클라이언트 내에서 직접 호출)
• 실행 시점: 페이지가 브라우저에서 로드된 후
• HTML 생성 위치: 초기에는 비어있고, 브라우저에서 채움
• 특징:
  • 페이지 초기 로딩은 빠르나, 콘텐츠는 늦게 표시됨
  • SEO에 불리함 (HTML에 내용 없음)
  • 사용자 상호작용이 중심인 대시보드 등에 적합

---

사용 예시

export default function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("/api/data").then(res => res.json()).then(setData);
  }, []);
  return <div>{data ? data.name : "Loading..."}</div>;
}

---

🧩 props와 렌더링 방식 관계 요약

렌더링 방식	사용 함수	HTML 생성 타이밍	SEO 영향	실시간성	주로 사용하는 상황
SSG	getStaticProps	빌드 타임	✅ 좋음	❌ 낮음	블로그, 문서, 소개
SSR	getServerSideProps	매 요청 시	✅ 좋음	✅ 높음	로그인 후 대시보드, 뉴스
CSR	없음 (useEffect)	클라이언트 로딩 후	❌ 약함	✅ 높음	SPA, 통계, 사용자 대시보드

---

💡 선택 가이드

• 정적인 페이지는 getStaticProps (SSG)로 캐싱 활용
• 자주 바뀌는 데이터는 getServerSideProps (SSR)
• 로그인 이후의 UX 중심 페이지는 CSR

---

🔧 혼합 전략 예시

Next.js는 페이지 단위로 전략을 혼합할 수 있음

• /blog/[slug].tsx: getStaticProps → 블로그 글
• /dashboard.tsx: getServerSideProps → 로그인 후 대시보드
• /chart.tsx: CSR → 실시간 차트 데이터

---

🧠 정리

렌더링 전략은 단순히 퍼포먼스 문제가 아닌 SEO, UX, 데이터 신선도를 좌우하는 중요한 선택
프로젝트의 성격과 데이터 갱신 주기에 따라 적절한 props 전략을 고르면, 성능과 유지보수성 모두에서 이점을 얻을 수 있음