TIL- 공부편/COMPUTER SIENCE

📌 TIL: Web Server와 WAS(Web Application Server) 개념 및 SSR vs CSR 비교

creator7087 2025. 3. 19. 16:33

1️⃣ Web Server란?

Web Server(웹 서버)는 클라이언트의 HTTP 요청을 처리하여 정적인 리소스를 제공하는 서버입니다.

  • HTML, CSS, JavaScript, 이미지, 동영상 등의 정적 파일을 클라이언트에 전송합니다.
  • 대표적인 웹 서버: Apache, Nginx, IIS

💡 웹 서버의 주요 역할
✅ HTTP 요청을 처리
✅ 정적 콘텐츠 제공 (HTML, CSS, JS, 이미지 등)
✅ 로드 밸런싱 및 캐싱 기능 제공

2️⃣ WAS (Web Application Server)란?

WAS(웹 애플리케이션 서버)는 웹 서버의 기능을 포함하면서 추가적으로 동적인 애플리케이션 로직을 처리하는 서버입니다.

  • 데이터베이스와 연동하여 동적인 웹 페이지를 생성합니다.
  • 대표적인 WAS: Tomcat, JBoss, WebLogic, WildFly

💡 WAS의 주요 역할
✅ 애플리케이션 실행 (비즈니스 로직 처리)
✅ DB와의 상호작용
✅ 동적 콘텐츠 생성 (사용자 요청에 따른 응답 변경 가능)

3️⃣ Web Server vs WAS 차이점

구분Web ServerWAS
역할 정적 리소스 제공 (HTML, CSS, JS 등) 애플리케이션 실행 및 동적 페이지 처리
주요 기능 HTTP 요청 처리, 정적 파일 제공, 캐싱 비즈니스 로직 처리, DB 연동
주요 기술 Apache, Nginx Tomcat, JBoss, WebLogic
요청 처리 단순 파일 전송 애플리케이션 실행 후 응답 반환
예제 요청 정적 파일 요청: GET /index.html 로그인 처리: POST /login

4️⃣ Web Server + WAS 조합 (효율적인 웹 시스템 구성)

웹 시스템을 구성할 때는 웹 서버와 WAS를 함께 사용하는 것이 일반적입니다.

🔹 구성 방법

효율적인 웹 시스템 구성

  1. 정적 리소스 요청 → 웹 서버에서 직접 처리 (속도 빠름)
  2. 동적 요청 (로그인, 데이터 조회 등) → 웹 서버가 WAS로 전달

💡 이 조합의 장점
✅ 리소스 관리 효율성 증가
✅ WAS 부하 감소 및 성능 향상
✅ 에러 처리 및 보안 강화 가능

📌 예제 시스템 구성

 

5️⃣ Servlet과 Servlet Container

🔹 Servlet이란?

  • Java 기반의 웹 애플리케이션을 개발할 때 사용되는 기술
  • 클라이언트의 HTTP 요청을 받아서 비즈니스 로직을 처리한 후 응답을 반환

💡 Servlet의 특징
✅ Java 기반 웹 애플리케이션 개발에 사용됨
✅ 동적인 페이지 생성 가능
✅ MVC 패턴에서 Controller 역할 수행

 

📌 Servlet 동작 방식

  1. 사용자가 URL을 입력하면 HTTP 요청이 Servlet Container로 전송됨
  2. Servlet Container가 요청을 분석하고 해당 Servlet을 실행
  3. Servlet이 비즈니스 로직을 수행한 후, 응답을 생성
  4. Servlet이 HTTP 응답을 클라이언트로 반환

6️⃣ Servlet Container (서블릿 컨테이너)란?

Servlet을 실행하고 관리하는 환경을 제공하는 소프트웨어

  • 대표적인 Servlet Container: Tomcat

💡 Servlet Container의 역할
✅ HTTP 요청을 받아서 Servlet에 전달
✅ Servlet의 생명 주기 관리 (생성, 실행, 종료)
✅ 멀티 스레드(스레드 풀) 지원 (동시 요청 처리)
✅ 보안 기능 제공

 

📌 Servlet Container 예제 (Tomcat을 이용한 요청 처리)

 

7️⃣ SSR(Server Side Rendering) vs CSR(Client Side Rendering)

🔹 SSR(Server Side Rendering)이란?

서버에서 동적으로 HTML을 생성하여 클라이언트에게 제공하는 방식

  • Java에서는 JSP, Thymeleaf 등이 SSR을 지원

📌 SSR 동작 방식

  1. 클라이언트가 서버에 HTML을 요청
  2. 서버가 비즈니스 로직을 수행하고 DB를 조회
  3. 조회결과를 기반으로 HTML을 동적으로 생성
  4. 완성된 HTML을 클라이언트에게 응답

💡 SSR의 장단점
✅ 장점
✔ 첫 페이지 로딩이 빠름
✔ 검색 엔진(SEO)에 유리함

❌ 단점
✘ 요청할 때마다 서버가 HTML을 렌더링해야 하므로 부하 발생
✘ 초기 페이지 외의 페이지 로딩 속도가 느림

🔹 CSR(Client Side Rendering)이란?

클라이언트 측에서 JavaScript를 사용하여 동적으로 HTML을 생성하는 방식

  • 대표적인 프레임워크: React, Vue


📌 CSR 동작 방식

  1. 클라이언트가 비어있는 HTML을 요청
  2. 서버는 기본 HTML과 JavaScript 파일을 응답
  3. 클라이언트는 JavaScript 실행 후 API 요청하여 데이터를 가져옴
  4. 동적으로 HTML을 렌더링

💡 CSR의 장단점
✅ 장점
✔ 사용자 인터랙션(상호작용)이 빠름
✔ 페이지 간 전환 속도가 빠름

❌ 단점
✘ 초기 로딩 시간이 길어짐
✘ SEO 최적화가 어렵고, 검색 엔진 크롤러가 내용을 수집하기 어려움

✅ SSR vs CSR 비교 정리

구분SSR (Server Side Rendering)CSR (Client Side Rendering)
처리 위치 서버에서 HTML을 생성하여 제공 클라이언트가 JavaScript로 HTML을 생성
초기 로딩 속도 빠름 느림 (JS 파일 다운로드 필요)
페이지 전환 속도 느림 빠름 (SPA 방식)
서버 부하 높음 낮음 (초기 로딩 후 서버 요청 감소)
SEO (검색 최적화) 유리 불리 (검색엔진 크롤링 어려움)
사용 기술 JSP, Thymeleaf, EJS React, Vue, Angular

✅ 요약

  • Web Server: 정적 리소스(HTML, CSS, JS) 제공 (예: Apache, Nginx)
  • WAS: 애플리케이션 실행 및 동적 데이터 처리 (예: Tomcat, JBoss)
  • Servlet: Java 기반의 웹 애플리케이션을 구현하는 기술
  • Servlet Container: Servlet 실행을 관리하는 환경 (예: Tomcat)
  • SSR: 서버에서 HTML을 생성하여 제공 (JSP, Thymeleaf)
  • CSR: 클라이언트에서 JavaScript로 HTML을 렌더링 (React, Vue)

💡 효율적인 웹 시스템 구성을 위해 Web Server와 WAS를 함께 사용하며, SSR과 CSR을 상황에 맞게 선택합니다.