6주차 Unit 2.3 — SSR vs CSR

Psj·3일 전

F-lab

목록 보기

189/197

Unit 2.3 — SSR vs CSR

F-LAB JAVA · 6주차 · Phase 2 · 웹 인프라 기초

📌 학습 목표

이 Unit을 끝내면 다음을 답할 수 있어야 한다.

SSR(서버 사이드 렌더링) 이란?
CSR(클라이언트 사이드 렌더링) 이란?
화면 생성 위치 의 차이는?
초기 로딩 속도 비교는?
SEO 측면 비교는?
서버 부하 비교는?
SEO 중요 서비스에 적합한 방식은?
SSR 에서도 React 를 쓸 수 있나 (Next.js) ?
ILIC 의 CSR (Vue SPA) 선택 맥락은?

🎯 핵심 한 문장

SSR 은 서버에서 HTML 을 완성해 보내고 (초기 로딩 빠름·SEO 좋음·서버 부하 큼), CSR 은 브라우저의 JS 가 화면을 그리며 (초기 로딩 느림·SEO 까다로움·서버 부하 작음), SEO 가 중요하면 SSR, 풍부한 인터랙션이 중요하면 CSR 을 택한다.
SSR (Server Side Rendering) 은 서버에서 HTML 을 완성하여 응답하는 방식으로, JSP·Thymeleaf·Next.js (SSR) 가 해당하며 초기 로딩이 빠르고 SEO 에 좋지만 서버 부하가 크다.
CSR (Client Side Rendering) 은 브라우저 (JavaScript) 가 화면을 그리는 방식으로, React SPA·Vue SPA 가 해당하며 서버 부하가 작지만 (JSON 만 주고받음) 초기 로딩이 느리고 (JS 다운로드 필요) SEO 가 까다롭다.
따라서 SEO 가 중요한 서비스 (쇼핑몰, 블로그) 는 SSR 이 유리하고, 풍부한 인터랙션과 앱 같은 경험이 중요한 서비스는 CSR 이 유리하다.
SSR 에서도 React 를 쓸 수 있는데 Next.js 가 React 기반 SSR 프레임워크이며, ILIC 는 B2B 관리 도구로 SEO 가 불필요하고 반응성·프론트백 분리가 중요해 Vue 3 SPA (CSR) 를 택했다.

비유 — 완성 요리 배달 vs 밀키트

SSR vs CSR = 배달 음식 vs 밀키트:

SSR (완성 요리 배달):
  - 주방(서버)이 완성 (HTML)
  - 받자마자 먹음 (빠른 첫 화면)
  - 매번 주방 부담 (서버 부하)
  - 메뉴판 검색 잘됨 (SEO)

CSR (밀키트):
  - 재료(JSON) + 조리법(JS) 받음
  - 집(브라우저)에서 조리 (화면 그림)
  - 첫 조리 시간 (초기 로딩 느림)
  - 조리 후엔 빠름 (인터랙션)
  - 주방 부담 적음 (JSON만)
  - 검색 엔진이 못 봄 (SEO 까다)

선택:
  - 검색 노출 중요 (쇼핑몰):
    → SSR (완성 배달)
  - 앱 같은 경험 (대시보드):
    → CSR (밀키트)

Next.js:
  - React 로 SSR 도 가능
  - 완성 배달 + 밀키트 장점

ILIC (B2B 관리):
  - 검색 불필요 (로그인 후)
  - 반응성 중요
  → Vue SPA (CSR)

→ SSR(서버 완성, SEO/빠른 첫화면) vs CSR(브라우저 렌더, 반응성/서버 부하 ↓).

🧭 9개 섹션 로드맵

1. SSR이란
2. CSR이란
3. 화면 생성 위치
4. 초기 로딩 비교
5. SEO 비교
6. 서버 부하 비교
7. SEO 중요 서비스
8. Next.js (SSR + React)
9. 면접 + 자기 점검

1️⃣ SSR이란

1.1 SSR

SSR (Server Side Rendering):

  서버에서 HTML 완성:
    - 서버가 데이터 + 템플릿
    - 완성된 HTML 응답
    - 브라우저는 그리기만

1.2 동작

SSR 동작:

  요청
    → 서버 (데이터 조회 + HTML 생성)
    → 완성 HTML 응답
    → 브라우저 즉시 표시

1.3 예시

SSR 예시:

  - JSP
  - Thymeleaf
  - Next.js (SSR 모드)
  - PHP, Ruby on Rails

1.4 ILIC 의 맥락

SSR 예시 (개념):

  GET /shipments
    → 서버: DB 조회 + Thymeleaf
    → 완성된 HTML:
      <table>
        <tr><td>BL001</td></tr>
        <tr><td>BL002</td></tr>
      </table>
    → 브라우저: 즉시 표시

  (ILIC 는 SSR 대신 CSR 선택)

1.5 자기 점검 답변

SSR(서버 사이드 렌더링)이란?

답:
1. SSR:

서버에서 HTML 완성

동작:
- 서버 생성 → 완성 응답
예시:
- JSP, Thymeleaf, Next.js
브라우저:
- 그리기만

2️⃣ CSR이란

2.1 CSR

CSR (Client Side Rendering):

  브라우저가 화면 그림:
    - 빈 HTML + JS 받음
    - JS 가 데이터 조회 (API)
    - JS 가 화면 생성

2.2 동작

CSR 동작:

  요청
    → 서버: 빈 HTML + JS 번들
    → 브라우저: JS 실행
    → JS: API 호출 (JSON)
    → JS: 화면 그림

2.3 예시

CSR 예시:

  - React SPA
  - Vue SPA
  - Angular
  - SPA (Single Page Application)

2.4 ILIC 의 맥락

CSR (ILIC Vue 3):

  GET / (첫 접속)
    → 서버: 빈 HTML + Vue JS 번들
    → 브라우저: Vue 실행
    → Vue: GET /api/shipments (JSON)
    → Vue: 화면 렌더링

  이후 라우팅:
    - 페이지 새로고침 X
    - JS 가 화면 전환 (SPA)
    - JSON 만 받음

2.5 자기 점검 답변

CSR(클라이언트 사이드 렌더링)이란?

답:
1. CSR:

브라우저가 화면

동작:
- 빈 HTML + JS → API → 렌더
예시:
- React/Vue SPA
서버:
- JSON 만

3️⃣ 화면 생성 위치

3.1 위치 차이

구분	SSR	CSR
화면 생성	서버	브라우저
HTML	완성	빈 + JS
데이터	서버에서 합침	JS 가 API

3.2 SSR 위치

SSR 위치:

  서버:
    - 데이터 + 템플릿 합침
    - HTML 완성
    - 브라우저로 전송

3.3 CSR 위치

CSR 위치:

  브라우저:
    - JS 다운로드
    - API 로 데이터
    - JS 가 DOM 생성

3.4 책임 분담

책임 분담:

SSR:
  - 서버: 렌더링 + 데이터
  - 브라우저: 표시

CSR:
  - 서버: 데이터 (API)
  - 브라우저: 렌더링

3.5 ILIC 의 맥락

화면 생성 위치 (ILIC):

ILIC CSR (Vue):
  - 서버 (Spring Boot):
    - REST API (JSON)
    - 렌더링 X

  - 브라우저 (Vue):
    - JSON 받음
    - 화면 렌더링
    - 라우팅

→ 프론트(Vue)/백(Spring) 명확 분리
→ 백엔드는 데이터만, 화면은 프론트

3.6 자기 점검 답변

화면 생성 위치의 차이는?

답:
1. 위치:

SSR: 서버
CSR: 브라우저

SSR:
- 서버가 합침
CSR:
- 브라우저가 렌더
책임:
- 분담 다름

4️⃣ 초기 로딩 비교

4.1 SSR 초기 로딩

SSR 초기 로딩:

  빠름:
    - 완성 HTML 즉시
    - 첫 화면 빠름
    - JS 대기 X

4.2 CSR 초기 로딩

CSR 초기 로딩:

  느림:
    - JS 번들 다운로드
    - JS 실행
    - API 호출
    - 그 후 화면

  → 첫 화면 지연

4.3 이후 로딩

이후 로딩:

SSR:
  - 페이지마다 서버 요청
  - 전체 새로고침

CSR:
  - JS 가 화면 전환
  - JSON 만 (빠름)
  - SPA (부드러움)

4.4 트레이드오프

트레이드오프:

SSR:
  - 첫 화면 빠름
  - 이후 페이지 전환 느림 (새로고침)

CSR:
  - 첫 화면 느림
  - 이후 빠름 (SPA)

4.5 ILIC 의 맥락

초기 로딩 (ILIC):

ILIC CSR (Vue):
  - 첫 접속:
    - Vue 번들 다운로드 (느림)
    - 로딩 스피너
  
  - 이후 (로그인 후 작업):
    - 페이지 전환 빠름 (SPA)
    - JSON 만 받음
    - 새로고침 X

  B2B 관리 도구:
    - 첫 로딩 한 번 (괜찮음)
    - 작업 중 반응성 중요 (CSR 유리)

4.6 자기 점검 답변

초기 로딩 속도 비교는?

답:
1. SSR:

빠름 (완성 HTML)

CSR:
- 느림 (JS 다운로드)
이후:
- CSR 빠름 (SPA)
트레이드오프:
- 첫 화면 vs 이후

5️⃣ SEO 비교

5.1 SEO

SEO (검색 엔진 최적화):

  검색 엔진 크롤러:
    - HTML 읽음
    - 색인 (검색 노출)

→ HTML 내용 중요

5.2 SSR SEO

SSR SEO:

  좋음:
    - 완성 HTML
    - 크롤러가 내용 봄
    - 색인 잘됨

5.3 CSR SEO

CSR SEO:

  까다로움:
    - 초기 HTML 비어있음
    - JS 실행해야 내용
    - 크롤러가 JS 실행 X (전통)

  → 색인 어려움

5.4 CSR SEO 개선

CSR SEO 개선:

  - 구글 크롤러는 JS 실행 (일부)
  - SSR/SSG 도입 (Next.js)
  - 프리렌더링
  - 메타 태그 동적

→ 완전 해결은 SSR

5.5 ILIC 의 맥락

SEO (ILIC):

ILIC = B2B 물류 플랫폼:
  - 로그인 후 사용 (관리 도구)
  - 검색 노출 불필요 (SEO 무관)
  - 공개 페이지 X

  → CSR (Vue) 의 SEO 단점 무관
  → CSR 선택 타당

(SEO 중요 = 공개 쇼핑몰/블로그 → SSR)

5.6 자기 점검 답변

SEO 측면 비교는?

답:
1. SEO:

검색 노출

SSR:
- 좋음 (완성 HTML)
CSR:
- 까다로움 (빈 HTML)
개선:
- SSR/SSG (Next.js)

6️⃣ 서버 부하 비교

6.1 SSR 서버 부하

SSR 서버 부하:

  큼:
    - 매 요청 HTML 생성
    - 렌더링 비용
    - 서버 CPU

6.2 CSR 서버 부하

CSR 서버 부하:

  작음:
    - JSON 만 응답
    - 렌더링 X (브라우저)
    - 정적 파일 (CDN)

6.3 부하 분산

부하 분산:

SSR:
  - 서버가 렌더링
  - 트래픽 ↑ → 서버 ↑

CSR:
  - 렌더링 클라이언트
  - 서버는 API 만
  - 확장 쉬움

6.4 비교 표

구분	SSR	CSR
초기 로딩	빠름	느림
SEO	좋음	까다로움
서버 부하	큼	작음
이후 전환	느림	빠름
예시	JSP/Thymeleaf	React/Vue

6.5 ILIC 의 맥락

서버 부하 (ILIC):

ILIC CSR (Vue):
  - 백엔드 (Spring Boot):
    - REST API (JSON 만)
    - 렌더링 부담 X
    - 431 API 효율적

  - 정적 (Vue 번들):
    - nginx 가 서빙 (캐싱)
    - CDN 가능

  → 서버 부하 ↓ (작은 팀에 유리)
  → 백엔드는 데이터에 집중

6.6 자기 점검 답변

서버 부하 비교는?

답:
1. SSR:

큼 (렌더링)

CSR:
- 작음 (JSON)
분산:
- CSR 확장 쉬움
ILIC:
- CSR (부하 ↓)

7️⃣ SEO 중요 서비스

7.1 SEO 중요 서비스

SEO 중요 서비스:

  - 쇼핑몰 (상품 검색)
  - 블로그 (콘텐츠 검색)
  - 뉴스 (기사 노출)
  - 공개 페이지

→ SSR 유리

7.2 SEO 불필요

SEO 불필요:

  - 관리자 대시보드
  - B2B 도구 (로그인)
  - 사내 시스템
  - 앱 같은 서비스

→ CSR 유리

7.3 선택 기준

선택 기준:

SSR 선택:
  - SEO 필요
  - 빠른 첫 화면
  - 콘텐츠 중심

CSR 선택:
  - SEO 불필요
  - 풍부한 인터랙션
  - 앱 같은 경험

7.4 하이브리드

하이브리드:

  - SSR + CSR (Next.js)
  - SSG (정적 생성)
  - ISR (점진적)

→ 장점 결합

7.5 ILIC 의 맥락

SEO 판단 (ILIC):

ILIC = B2B 물류 포워딩 플랫폼:
  - 로그인 후 사용
  - 포워더/화주/파트너 (B2B)
  - 검색 노출 불필요

  → SEO 불필요
  → CSR (Vue) 적합

만약 SEO 필요했다면:
  - 공개 마케팅 페이지
  - → SSR (Thymeleaf/Next.js) 고려

→ 서비스 성격이 렌더링 방식 결정

7.6 자기 점검 답변

SEO 중요 서비스에 적합한 방식은?

답:
1. SEO 중요:

쇼핑몰/블로그 → SSR

SEO 불필요:
- 관리 도구 → CSR
기준:
- SEO + 인터랙션
하이브리드:
- Next.js

8️⃣ Next.js (SSR + React)

8.1 Next.js

Next.js:

  React 기반 SSR 프레임워크:
    - React 로 SSR
    - SSG, ISR 지원
    - SEO + 인터랙션

8.2 React 로 SSR

React 로 SSR:

  React = 원래 CSR:
    - 클라이언트 렌더링

  Next.js:
    - 서버에서 React 렌더링
    - 완성 HTML + 하이드레이션

→ React 로 SSR 가능

8.3 하이드레이션

하이드레이션 (Hydration):

  1. 서버: HTML 렌더 (SSR)
  2. 브라우저: HTML 표시 (빠름)
  3. JS 로드 후 React 활성화
  4. 이후 CSR (인터랙션)

→ SSR + CSR 장점

8.4 렌더링 전략

Next.js 렌더링 전략:

  SSR: 요청 시 서버 렌더
  SSG: 빌드 시 정적 생성
  ISR: 점진적 재생성
  CSR: 클라이언트 (필요 시)

→ 페이지별 선택

8.5 ILIC 의 맥락

Next.js (개념, ILIC 는 Vue):

  React 진영:
    - Next.js (SSR/SSG)

  Vue 진영:
    - Nuxt.js (SSR/SSG)
    - (Next.js 의 Vue 버전)

  ILIC:
    - Vue 3 SPA (순수 CSR)
    - SEO 불필요 → SSR 안 함
    - 만약 SEO 필요 시 Nuxt 고려 가능

→ "SSR 에서도 React/Vue 가능" (Next/Nuxt)

8.6 자기 점검 답변

SSR에서도 React를 쓸 수 있나 (Next.js) ?

답:
1. Next.js:

React SSR 프레임워크

React SSR:
- 서버 렌더 + 하이드레이션
하이드레이션:
- SSR → CSR 전환
전략:
- SSR/SSG/ISR/CSR

9️⃣ 면접 + 자기 점검

9.1 면접 단골 질문 매핑

Q	핵심 답변
SSR?	서버에서 HTML 완성
CSR?	브라우저가 화면
화면 위치?	서버 vs 브라우저
초기 로딩?	SSR 빠름, CSR 느림
SEO?	SSR 좋음
서버 부하?	SSR 큼, CSR 작음
SEO 서비스?	쇼핑몰 → SSR
Next.js?	React SSR
하이드레이션?	SSR → CSR
ILIC?	Vue CSR (SEO 무관)

9.2 자기 점검 체크리스트

SSR

정의

CSR

정의

화면 위치

서버/브라우저

초기 로딩

비교

SEO

비교

서버 부하

비교

SEO 서비스

적합

Next.js

SSR + React

9.3 추가 심화 질문

Q1: SSG?

답:

Static Site Generation
빌드 시 HTML 생성
정적 (CDN)
블로그/문서 적합

Q2: ISR?

답:

Incremental Static Regeneration
SSG + 주기적 갱신
정적 + 최신
Next.js

Q3: 하이드레이션 비용?

답:

JS 로드 후 활성화
큰 앱 느릴 수
부분 하이드레이션
React Server Components

Q4: SPA 단점?

답:

초기 로딩 (번들)
SEO 까다로움
메모리 (장시간)
라우팅 복잡

Q5: BFF?

답:

Backend For Frontend
프론트 전용 백엔드
API 조합
CSR 보완

🎯 핵심 요약 — 3줄 정리

1. SSR vs CSR

SSR: 서버에서 HTML 완성 (초기 빠름, SEO 좋음, 서버 부하 큼)
CSR: 브라우저가 렌더 (초기 느림, SEO 까다, 서버 부하 작음)

2. 선택 기준

SEO 중요 (쇼핑몰/블로그) → SSR
풍부한 인터랙션 (관리 도구) → CSR

3. Next.js와 ILIC

Next.js: React 로 SSR (하이드레이션, SSG/ISR)
ILIC: B2B 관리 도구 (SEO 무관) → Vue 3 SPA (CSR)

📚 다음으로...

Unit 2.4 — JAR vs WAR (Phase 2 완주)

이번 Unit에서 SSR vs CSR 을 봤다면, 다음은 JAR vs WAR (Phase 2 마지막).

Java Archive vs Web Application Archive
JRE vs 외부 WAS
Spring Boot = JAR (내장 톰캣)
BOOT-INF/lib

Phase 2 진행 상황

🌐 Phase 2 — 웹 인프라 기초
  ✅ Unit 2.1 웹서버 vs WAS
  ✅ Unit 2.2 서블릿과 JSP
  ✅ Unit 2.3 SSR vs CSR ← 여기
  ⏭ Unit 2.4 JAR vs WAR — Phase 2 완주

6주차 누적 진행

🧪 Part A — 학습 도구와 환경
  ✅ Phase 1 — JUnit 테스트 (5 Unit)
  🌐 Phase 2 — 웹 인프라 기초 (3/4 진행)

총: 8/28 Unit

Psj

Software Developer

이전 포스트

6주차 Unit 2.2 — 서블릿(Servlet)과 JSP

다음 포스트