17. SSR vs API

박은서

Mar 09, 2026

1. 웹사이트는 어떻게 데이터를 보여줄까?

1️⃣ 웹사이트의 구성 요소

1) 브라우저 (사용자 화면)

우리가 보는 웹페이지

2) 서버

데이터 처리, 계산, DB 조회

3)데이터베이스(DB)

정보 저장

2️⃣ 기본 흐름

사용자가 페이지를 열면


사용자 → 서버 요청 → 서버 처리 → 결과 반환 → 브라우저 화면 표시

여기서 "서버가 HTML을 만들어 보내느냐" 아니면 "데이터만 보내느냐"에 따라 방식이 달라짐

➡️ 그 대표적인 개념이 SSR과 API

2. SSR (Server Side Rendering)

1️⃣ SSR의 개념

1) SSR이란?

서버에서 HTML을 완성해서 보내주는 방식

2) 흐름


사용자 요청
↓
서버가 HTML 페이지를 완성
↓
완성된 웹페이지 전달
↓
브라우저에 바로 표시

3) 예

네이버 뉴스 페이지 열기


1. 브라우저가 서버에 요청
2. 서버가 뉴스 데이터 조회
3. HTML 페이지 생성
4. 완성된 페이지 전달

브라우저는 그냥 화면만 보여주면 됨

2️⃣ SSR의 특징

1) 특징

서버가 페이지를 만들어서 전달

브라우저는 HTML을 그대로 렌더링

초기 로딩이 빠름

SEO에 좋음

2) 대표 기술

PHP

JSP

Django

Ruby on Rails

Next.js SSR

3️⃣ SSR 실행 흐름


1 사용자 → 페이지 요청

2 서버 → DB 조회

3 서버 → HTML 생성

4 서버 → 완성된 HTML 반환

5 브라우저 → 화면 표시

4️⃣ SSR의 장단점

1) 장점

첫 화면이 빠름

이미 완성된 HTML이 오기 때문

SEO 좋음

구글 검색 엔진이 HTML을 바로 읽을 수 있음

초기 구조가 단순

JS 없이도 페이지 동작 가능

2) 단점

서버 부하

모든 페이지를 서버가 생성해야 함

페이지 이동이 느림

페이지 이동 시마다 전체 HTML 다시 요청

인터랙션이 제한적

SPA보다 UX가 떨어질 수 있음

3. API (Application Programming Interface)

1️⃣ API의 개념

1) API 란?

서버가 데이터를 제공하는 통로

💡

API는 페이지를 주지 않음 ➡️ 데이터만 전달

2) 예


GET /api/users

서버 응답


[
 { "name":"철수", "age":25 },
 { "name":"영희", "age":23 }
]

⬇️


API = 데이터 공급

2️⃣ API 특징

1) 특징

데이터만 전달 (JSON, XML)

화면은 프론트엔드가 생성

다양한 플랫폼에서 사용 가능

2) 예

모바일 앱

다른 서버

3️⃣ API 실행 흐름


1 사용자 → 웹페이지 접속

2 브라우저 → API 요청

3 서버 → DB 조회

4 서버 → JSON 데이터 반환

5 브라우저 → 화면 구성

4️⃣ API의 장점

1) 장점

다양한 플랫폼 사용 가능

같은 API로 웹, 앱, IoT, 등 모두 가능

프론트 / 백엔드 분리

개발 구조


Frontend
React / Vue

Backend
API Server

서버 부담 감소

페이지 생성은 브라우저가 수행

2) API 단점

초기 로딩 느릴 수 있음

페이지 → JS → API → 데이터 → 렌더링
단계 많음

SEO 불리

JS 실행이 필요하기 때문

4. 추가 설명

1️⃣ SSR vs API 차이

1) 표로 이해하기

구분	SSR	API
결과	HTML	데이터(JSON)
화면 생성	서버	브라우저
초기 로딩	빠름	느릴 수 있음
SEO	좋음	불리
서버 부담	큼	적음
사용	전통 웹	SPA / 앱

2) 그림으로 이해하기

2️⃣ 실제 현대 웹 구조

1) SSR + API

요즘은 SSR + API 같이 사용

2) 예

Next.js


SSR + API

실제 흐름


1 초기 페이지 → SSR

2 이후 데이터 → API

3 화면 업데이트 → React


쇼핑몰

첫 화면 → SSR
상품 목록 → API
장바구니 → API

3️⃣ 같이 알아야 하는 개념

1) CSR (Client Side Rendering)

CSR = 브라우저가 화면 생성

대표

React
Vue
Angular

흐름


HTML → JS 로딩 → API 호출 → 화면 생성

2) SPA (Single Page Application)

페이지 이동 없이 JS가 화면만 바꾸는 방식


Gmail
Notion
Figma

3) REST API

가장 일반적인 API 구조


GET /users
POST /users
PUT /users/1
DELETE /users/1

4️⃣ 이해하기 쉬운 비유

1) SSR

🍔 완성된 햄버거 배달


주문 → 완성된 햄버거 전달

2) API

🥬 재료만 배달


빵
패티
야채

→ 직접 조립

5️⃣ 개발자가 꼭 이해해야 하는 핵심

1) 웹 개발 방식

2) 현대 웹 개발

SSR + API + CSR

3) 예


Next.js
Nuxt
Remix

6️⃣ 한 문장 정리


SSR = 서버가 페이지를 만들어 전달

API = 서버가 데이터를 제공