프론트엔드 취업 치트키: 렌더링 방식 3대장 장단점 및 실무 코드(CSR, SSR, SSG)

프론트엔드 개발자 면접에서 빠지지 않고 등장하는 단골 질문,

"CSR, SSR, SSG의 차이는 무엇인가요?"

 

단순히 면접용 암기가 아니라, 실제 서비스를 기획하고 성능을 최적화하려면

이 렌더링 방식들의 차이를 명확히 이해해야 합니다.

 

오늘은 React나 Next.js를 다루는 개발자라면 반드시 알아야 할

웹 렌더링 3대장(CSR, SSR, SSG)을

7살도 이해할 수 있는 쉬운 비유와 실무 코드 예시로 완벽하게 정리해 드립니다.

목차

1. CSR (Client-Side Rendering): 밀키트
2. SSR (Server-Side Rendering): 식당 주문
3. SSG (Static Site Generation): 편의점 도시락
4. 한눈에 보는 비교 및 요약

---

1. CSR (Client-Side Rendering)

기본 개념

브라우저(Client)가 자바스크립트를 이용해 직접 화면을 그리는 방식입니다.

서버는 뼈대가 되는 빈 HTML과 JS 파일만 보내주고, 나머지는 브라우저가 알아서 렌더링합니다.

👶 7살도 이해하는 설명: "밀키트(Meal Kit)"

"엄마가 밀키트 상자를 주문했어.
집에 상자가 도착하면(다운로드),
설명서를 보고 우리가 직접 재료를 볶고 끓여서(렌더링) 요리해야 해.
요리하는 동안 접시는 비어있지만, 다 만들고 나면 식지 않고 끝까지 맛있게 먹을 수 있어!"

장점과 단점

• 장점: 초기 로딩 후에는 페이지 이동이 앱처럼 빠르고 부드럽습니다. 서버 부하가 적습니다.
• 단점: 초기 로딩 속도(TTV)가 느립니다(JS 받을 때까지 빈 화면). SEO(검색 노출)에 불리합니다.

 

추천 상황

관리자 페이지(Admin), 로그인이 필요한 서비스, 모바일 웹 앱.

 

💻 실무 코드 예시 (React)

화면 껍데기가 먼저 뜨고, useEffect를 통해 데이터를 가져와 채워 넣습니다.

import { useState, useEffect } from 'react';

export default function UserProfile() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 1. 브라우저가 화면을 띄운 뒤 데이터 요청 (Client-side)
    fetch('https://api.example.com/user')
      .then((res) => res.json())
      .then((result) => setData(result));
  }, []);

  // 2. 데이터 도착 전 로딩 처리
  if (!data) return <div>로딩 중...</div>;

  return <div>반갑습니다, {data.name}님!</div>;
}

---

2. SSR (Server-Side Rendering)

기본 개념

서버에서 화면을 다 그려서 완성된 HTML을 보내주는 방식입니다.

사용자가 클릭할 때마다 서버가 일해서 최신 화면을 줍니다.

👶 7살도 이해하는 설명: "식당 주문"

"식당에 가서 음식을 시켰어.
주방장 아저씨(서버)가 주방에서 요리를 뚝딱 만들어서 완성된 접시를 가져다주셨어.
우리는 요리할 필요 없이 나오자마자 바로 먹으면 돼!"

장점과 단점

• 장점: 초기 로딩이 빠릅니다. 검색 엔진이 완성된 글을 읽어가므로 SEO에 매우 강력합니다.
• 단점: 페이지 이동 시마다 서버가 일해야 하므로 사용자가 몰리면 서버가 느려질 수 있습니다.

 

추천 상황

뉴스 사이트, 주식 정보, 쇼핑몰 상세 페이지, 커뮤니티 게시판.

 

💻 실무 코드 예시 (Next.js)

요청이 올 때마다 getServerSideProps 함수가 서버에서 실행됩니다.

// 요청할 때마다 서버에서 항상 먼저 실행됨
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/news');
  const news = await res.json();

  // 완성된 데이터를 페이지로 전달
  return { props: { news } };
}

export default function NewsPage({ news }) {
  return <div>실시간 속보: {news.title}</div>;
}

---

3. SSG (Static Site Generation)

기본 개념

개발자가 사이트를 배포(Build)할 때 미리 HTML을 다 만들어두는 방식입니다.

서버는 요청이 오면 미리 만든 파일을 주기만 하면 됩니다.

👶 7살도 이해하는 설명: "편의점 도시락"

"공장에서 미리 도시락을 잔뜩 만들어서 진열해 뒀어(빌드).
우리는 편의점에 가서 집어오기만 하면 돼.
기다릴 필요 없이 세상에서 제일 빨리 먹을 수 있어!
하지만 반찬을 바꾸려면 공장에서 다시 만들어올 때까지 기다려야 해."

장점과 단점

• 장점: 속도가 가장 빠릅니다. 서버 비용이 거의 들지 않습니다.
• 단점: 내용이 바뀌면 사이트를 다시 빌드해서 배포해야 합니다. 실시간 데이터 반영이 어렵습니다.

 

추천 상황

블로그, 회사 소개 페이지, 포트폴리오, 사용 설명서.

 

💻 실무 코드 예시 (Next.js)

배포 시점(Build Time)에 getStaticProps가 딱 한 번 실행됩니다.

// 배포(Build)할 때 딱 한 번 실행됨
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/intro');
  const content = await res.json();

  return { props: { content } };
}

export default function IntroPage({ content }) {
  return <div>회사 소개: {content.body}</div>;
}

---

🚀 3줄 요약

1. CSR: "앱처럼 부드럽게 쓰고 싶어" 👉 관리자 페이지, SNS
2. SSR: "검색 노출이 중요하고 내용이 자주 바껴" 👉 쇼핑몰, 뉴스
3. SSG: "내용이 잘 안 바뀌고 무조건 빨라야 해" 👉 블로그, 소개 사이트

 

 

최근 실무에서는 Next.js를 사용하여 이 세 가지 방식을 페이지별로 적절히 섞어서 사용하는 하이브리드 방식이 대세입니다.

여러분의 프로젝트에는 어떤 방식이 적합한가요?