🛠️ SSR(Server Side Rendering)이란?
- 서버에서 동적으로 HTML을 생성하여 클라이언트에게 응답하는 렌더링 방식
→ 백엔드 영역 (JSP, Thymeleaf 등)
⚡ SSR 동작 흐름
1. 클라이언트가 서버에 HTML 요청
2. 서버(WAS)가 DB에서 데이터 조회
3. 데이터를 기반으로 서버에서 HTML 생성
4. 완성된 HTML을 응답
장점:
- 초기 로딩 속도 빠름: 렌더링된 HTML이 바로 전달됨
- SEO에 유리: 검색엔진이 HTML을 즉시 수집 가능
- ex) 쇼핑몰, 뉴스 사이트 등
- SEO: 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정
단점:
- 매 요청마다 서버 렌더링 → 서버 부하 증가
- 전체 페이지 새로고침 방식 → 비효율적 전환 속도
🖥️ CSR(Client Side Rendering)이란?
- 클라이언트(브라우저)에서 JavaScript로 HTML을 동적으로 구성하는 방식
→ 프론트엔드 영역 (React, Vue 등)
⚡ CSR 동작 흐름
1. 브라우저가 비어 있는 HTML 요청 (JS 링크 포함)
2. JS 파일을 다운로드 후 실행
3. API로 데이터를 요청 → JSON 응답
4. 받은 데이터를 기반으로 브라우저에서 HTML 구성
장점:
- 페이지 전환 빠름 (부분만 바뀌는 앱 느낌)
- 서버와 통신 없이도 화면 전환 가능
- ex) SNS 앱, 지도 앱 등
단점:
- 초기 로딩 느림: JS 파일을 모두 받아 실행해야 함
- SEO에 불리: JS 실행을 못하는 크롤러는 페이지 분석 어려움
🔍 마무리 Web Application 정리
1. 네트워크 통신은 HTTP로 이루어짐
2. HTTP는 무상태 프로토콜이며 비연결성 특징을 가지고 있음
3. HTTP Message 구조
- a. HTTP Method
b. 상태코드
c. HTTP Header
4. HTTP API는 Restful하게 설계해야 하며, 최소 성숙도 레벨 2를 지켜야 함
5. Servlet은 Java에서 Request, Response를 쉽게 다루게 해주는 객체
6. Servlet Container는 Servlet 객체를 싱글톤으로 관리
7. WAS는 다중 요청 처리를 위해 Multi Thread를 지원
8. SSR은 서버에서 동적인 페이지를 완성하여 응답한 것을 브라우저에서 화면을 출력
9. CSR은 HTTP API 통신으로 얻은 결과를 통해 브라우저에서 동적으로 화면을 출력
