WAS / Servlet / SSR, CSR

Web Server

• HTTP를 기반으로 동작하며 정적 리소스(HTML, CSS, JS, 이미지 등)를 제공
• ex. NGINX, Apache

 

WAS (Web Application Server)

• HTTP를 기반으로 동작하며 Application 로직을 수행하고, DB와 상호작용하여 동적 컨텐츠를 생성
• 자바에서는 Servlet Container 기능 수행
• 멀티 스레드 지원 (공유 변수 사용 유의)
• ex. Apache Tomcat(Spring Boot에 내장), Jetty, Undertow

---

 

Servlet

• HTTP 프로토콜 기반 요청 및 응답을 처리하는데 사용 -> 개발자가 더 쉽게 요청, 응답을 다룰 수 있게 됨
• 자바에서 Servlet은 HttpServlet 클래스를 상속받아 구현되며, 웹앱 개발의 핵심 기술

 

Servlet 동작 순서

1. WAS는 HTTP 요청 메세지를 기반으로 새로운 Request, Response 객체 생성
2. WAS는 만들어진 Request, Response 객체를 서블릿 컨테이너에 넘겨주며 ExampleServlet 객체 호출
3. ExampleServlet에서 비즈니스 로직 처리
4. Response 객체에 응답 정보 저장
5. WAS는 Response 객체로 HTTP 응답 메세지 생성

-> 개발자는 Request 객체에 담긴 HTTP 요청 정보로 비즈니스 로직 수행, Response 객체에 HTTP 응답 정보 입력

 

 

Servlet Container

• 서블릿을 초기화, 생성, 관리, 호출, 종료하는 역할
• 서블릿 객체를 싱글톤으로 관리
• 동시 요청에 대한 처리를 위해 Multi Thread 지원

---

 

Thread

단일 스레드

• 여러 개의 요청이 있을 때, (대기 -> 작업 수행 -> 스레드 반환) 작업을 반복
• 요청의 작업이 지연되거나 error가 발생하는 경우, 이후의 요청이 모두 Time out

 

멀티 스레드 - 요청마다 새로운 스레드 생성

• 작업 완료 시 스레드 종료
• 장점
  • 동시 요청 처리 가능
  • 하나의 스레드에 문제 발생 시, 다른 스레드는 정상 동작
• 단점
  • 스레드 생성에 제한이 없어 수많은 동시 요청 발생시 리소스(메모리, CPU 등) 부족으로 서버 다운 가능성
  • 스레드 생성 비용이 높다
  • context switching 비용 발생 (CPU가 처리할 스레드를 교체하는 것)

멀티 스레드 - Thread Pool

• 이미 생성된 여러 개의 스레드가 thread pool에 존재
• 요청이 들어오면 thread pool에서 스레드를 받아 사용
• 완료 시 스레드를 thread pool에 반납
• thread pool의 모든 스레드가 모두 사용 중이라면, 대기하거나 요청을 거절
• 장점
  • 스레드가 미리 생성되어 있어, 생성과 종료의 비용이 절약되고 응답이 빠르다
  • 생성 가능한 스레드의 최대치가 정해져 있어서 많은 요청이 들어와도 안전하게 처리 가능
• 단점
  • 최대 스레드 수를 낮게 설정하면 응답 지연
  • 최대 스레드 수가 너무 높으면 리소스 부족으로 서버 다운

 

---

SSR (Server Side Rendering)

• 서버에서 동적으로 HTML을 만들어 클라이언트에게 제공하는 기술
• ex. JSP, Thymeleaf
• 장점
  • 초기 페이지 로드 시 완전히 렌더링된 HTML을 반환하므로, 첫 페이지 로딩이 빠르다
  • 검색 엔진 크롤러가 완전한 HTML을 즉시 수집할 수 있어 SEO에 유리
    • SEO(Search Engine Optimization) : 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정
• 단점
  • 모든 요청에 대해 서버가 페이지를 렌더링하면, 높은 트래픽 상황에서 서버 부하 크게 증가
  • 초기 페이지를 제외한 페이지들은 렌더링 후 반환되므로 속도가 느리다

 

CSR (Client Side Rendering)

• 자바스크립트를 사용해 동적으로 HTML을 생성해서 적용하는 기술
• 웹을 모바일 앱처럼 부분마다 변경할 수 있게 함
• ex. React, Vue
• 동작 흐름

1. 비어있는 HTML(기본 뼈대) 요청
2. 서버로부터 HTML, JS 번들 응답
3. JS를 실행하면서, 내부적으로 필요한 데이터를 API 요청 -> 가져온 데이터로 인해 완성된 화면 렌더링
4. 페이지 이동을 할 때마다 서버 요청을 보내는 대신, JS가 필요한 데이터만 가져와 화면을 갱신

 

•  장점
  • 클라이언트 측에서 렌더링하므로 사용자 인터랙션에 빠른 반응
  • 초기 로딩 후에는 서버와의 통신없이 빠르게 페이지 간 전환 가능
  • ex. 구글맵, sns
• 단점
  • 초기 로딩 시간이 길다
  • 검색 엔진 크롤러가 자바스크립트를 제대로 실행하지 못하면 SEO에 불리