[Network] Web Server, WAS, SSR, CSR

💭 들어가며

“React를 왜 쓸까요? 그냥 서버에서 HTML 만들어서 던져주면 되는 거 아니에요?” 면접에서 받았던 질문이다.

당시엔 CS 지식이 부족했고, 프론트엔드와 웹 전반에 대한 이해도 깊지 않아 제대로 답하지 못했다. 프로젝트에서 잠시 벗어나 여유가 생긴 시점에, 그동안 네트워크 강의와 공부를 통해 배운 내용을 바탕으로 예전에 헷갈렸던 개념들을 다시 정리해 보려 한다.

 

 

✅ 웹 서비스 구조

위 그림은 널널한 개발자님의 유튜브 강의를 참고해 정리한 것이다.

 

▶ Web Server

• 클라이언트(브라우저)의 요청을 받아 정적 리소스(HTML, CSS, JS, 이미지 등)를 응답한다.
• 단순히 파일을 내려주는 역할만 하며, DB 연결이나 비즈니스 로직을 처리하지 않는다.
• 대표적인 예시로 Apache, Nginx, AWS S3 등이 있다.

 

▶ WAS (Web Application Server)

• DB와 연동하고, 요청에 따라 동적으로 HTML이나 JSON을 생성한다.
• Web Server와 달리 비즈니스 로직을 처리한다.
• 대표적인 예시로 Tomcat, Jetty 등이 있다.

 

▶ 왜 Web Server와 WAS를 분리할까?

• WAS는 DB 조회 등 동적 페이지 생성을 위한 로직을 처리하기 때문에, 단순한 정적 콘텐츠까지 WAS가 제공하면 리소스는 한정되어 있기 때문에 응답 지연이 발생할 수 있다. 따라서 정적 파일은 Web Server가, 비즈니스 로직은 WAS가 처리하도록 분리한다.
• 정적 리소스 요청이 많다면 Web Server를, 비즈니스 로직 부하가 크다면 WAS를 각각 확장할 수 있어 트래픽 성격에 따라 독립적으로 스케일링이 가능하다.
• Web Server는 단순 정적 파일만 제공하므로 안정적이며, WAS가 장애로 중단되더라도 오류 페이지 제공 등 최소한의 대응이 가능하다.

 

 

✅ SSR, CSR

▶ SSR (Server-Side Rendering)

SSR(Server-Side Rendering)은 서버에서 HTML을 만들어 클라이언트로 내려주는 방식이다. 모든 요청마다 새로운 HTML을 만들어야 한다.

🔽 요청 흐름

1. 클라이언트가 특정 URL을 요청한다.
2. 서버(WAS)가 요청을 받는다.
3. DB 조회 및 비즈니스 로직을 수행한다.
4. 서버에서 HTML 템플릿을 렌더링한다. (완성된 HTML을 생성)
5. 완성된 HTML을 클라이언트에 응답한다.
6. 브라우저가 HTML을 즉시 렌더링한다.

 

▶ CSR (Client-Side Rendering)

CSR(Client-Side Rendering)은 브라우저에서 자바스크립트가 실행되어 화면을 직접 렌더링하는 방식이다.

🔽 요청 흐름 (React)

1. 첫 요청 시 서버로부터 빈 HTML(div id="root")을 전달받는다.
2. 브라우저가 JS 번들 파일을 다운로드한다.
3. JS 번들을 실행하여 화면을 렌더링한다.
4. 이후 페이지 전환 시에는 React Router 등을 통해 필요한 데이터만 fetch하고, 전체 HTML을 다시 요청하지 않으며 변경된 부분만 갱신한다.

🔽 참고 - 백엔드 관점에서 얕게 이해한 번들과 DOM
여러 개의 JS 컴포넌트 파일을 하나로 합치는 과정을 번들링(bundling)이라 하며, 그 결과로 생성된 파일을 번들(bundle)이라고 한다. 브라우저 엔진은 이 번들을 실행시키고(마치 JVM이 컴파일된 .class 파일을 읽어 실행하는 것처럼 이해함), DOM(Document Object Model)은 브라우저가 HTML을 객체 트리 형태로 표현한 구조로, JS가 이 DOM을 조작함으로써 HTML과 동적으로 상호작용할 수 있게 된다.

 

 

✅ 의문점

▶ CSR이 SSR보다 초기 속도가 느린 이유

클라이언트 사이드 렌더링(CSR)의 경우, 사용자가 초기 화면에 진입하면 정적 호스팅된 서비스에서는 예를 들어, “/” 경로로 접근할 때 index.html로 리다이렉트된다. 이 index.html 파일에는 CSS와 JS 파일의 경로가 포함되어 있으며, 브라우저는 HTML을 위에서부터 순차적으로 파싱하며 DOM 트리를 구성한다. 이 과정에서 번들 JS를 만나면 브라우저는 이를 실행해야 한다고 판단하고, S3와 같은 정적 서버에서 해당 JS 파일을 요청해 다운로드한다. 이 때문에 초기 로딩 시점에는 JS 파일 다운로드와 실행 과정이 추가되어 속도가 느려질 수 있다.

🔽 참고
다만, 이렇게 로드된 JS 파일은 기본적으로 사용자의 로컬 디스크에 캐시 형태로 저장된다. 따라서 같은 사용자가 재접속할 경우, 브라우저는 서버에 다시 요청하지 않고 캐시된 JS 파일을 재사용하여 훨씬 빠르게 페이지를 로드할 수 있다.

 

▶ CSR도 결국 API를 요청해야 하지 않는가?

CSR의 핵심 이점은 HTML을 미리 생성하지 않아도 된다는 점이다. 필요한 시점에 API를 통해 필요한 데이터만 fetch하여 브라우저에서 조립(rendering)하면 되기 때문에, 서버 부하를 줄이고 네트워크 사용량을 최소화할 수 있으며, 동시에 빠른 화면 전환과 유연한 사용자 경험(UX)을 제공할 수 있다.

 

▶ React를 사용하는 이유

“그냥 서버에서 HTML 만들어서 던져주면 되는 거 아니에요?”

• 서버 사이드 렌더링(SSR)의 경우
  • 매 요청마다 DB 조회를 수행하고 HTML을 새로 생성해 클라이언트에 전달한다. 이 과정에서 서버 자원이 많이 소모되며, 페이지 전환 시마다 HTML을 다시 받아야 하므로 화면 전환 속도가 느려질 수 있다.
  • 매 요청마다 전체 HTML을 새로 내려야 하므로 페이로드가 커질 수 있어 네트워크 비용이 높아지고, 요청이 반복될수록 트래픽 부하도 늘어난다.
  • 사용자별, 상태별로 HTML이 달라 캐싱이 어렵다. 즉, CDN이나 브라우저 캐시가 효율적으로 동작하지 않아 대규모 트래픽을 처리하기엔 한계가 있다.
• 클라이언트 사이드 렌더링(CSR)의 경우
  • React는 HTML을 미리 생성하지 않고, 필요한 데이터만 API로 받아 브라우저에서 조립하기 때문에 서버 부하를 줄이고 네트워크 사용량을 최소화할 수 있다.
  • 또한, 사용자 경험(UX)이 중요해진 현대 웹 환경에서 빠른 화면 전환과 동적 인터랙션을 구현하기에 적합하다.

 

▶ 요즘 다시 SSR이 주목받는 이유

최근 들어 SSR(Server-Side Rendering)이 다시 주목받고 있다. 그중 가장 큰 이유는 SEO(검색 엔진 최적화) 때문이다.

• CSR의 경우, 첫 응답 시 브라우저는 비어 있는 HTML을 받기 때문에 검색 크롤러가 실제 콘텐츠를 제대로 읽지 못한다. 따라서 페이지가 검색 엔진에 노출되는 데 한계가 있다.
• 반면 SSR은 서버에서 이미 완성된 HTML을 생성해 전달하므로, 검색 크롤러가 콘텐츠를 직접 읽을 수 있어 검색 엔진에 노출되는 데 유리하다.

 

▶ 그래서 등장한 Hybrid 모델 (Next.js 등)

최근 프레임워크들은 SSR과 CSR의 장점을 결합한 하이브리드 렌더링 구조를 제공한다.

• 초기 요청 시에는 SSR을 통해 HTML을 생성하여 SEO와 초기 로딩 속도를 확보하고,
• 이후 페이지 이동 시에는 CSR 방식을 활용해 빠른 전환과 부드러운 사용자 경험(UX)을 유지한다.

🔽 참고
그렇다면 SSR의 단점 중 하나인 캐싱 비효율성은 어떻게 보완됐을까? Next.js는 SSR과 CSR뿐 아니라 SSG(Static Site Generation)과 ISR(Incremental Static Regeneration)도 함께 지원한다. 특히 SSG는 빌드 시점에 HTML을 미리 생성해 두는 방식으로, 정적 페이지를 CDN에 캐싱할 수 있어 SSR의 캐싱 한계를 효과적으로 보완한다.

 

 

✅ 결론

렌더링 방식에 정답은 없다. 서비스의 목적과 특성에 따라 적절한 방식을 선택해야 한다.

• SSR: SEO가 중요하고 초기 로딩 속도가 핵심인 페이지 (예: 홍보용 페이지, 랜딩 페이지)
• CSR: 데이터 중심이며 사용자 인터랙션이 많은 페이지 (예: 대시보드, 커뮤니티, 실시간 서비스)
• 하이브리드: SEO와 인터랙션 모두 중요한 서비스 (예: 뉴스 플랫폼, 이커머스, 대규모 웹앱)

 

 

📍 참고 자료

• Next.js 공식 한글 문서 - Rendering
• Next.js 공식 문서 - Client-side Rendering (CSR)
• Next.js 공식 문서 - Server-side Rendering (SSR)
• Next.js 공식 문서 - Static Site Generation (SSG)
• Next.js 공식 한글 문서 - Incremental Static Regeneration (ISR)