SSR & CSR
SSR (Server Side Rendering)
서버에서 동적으로 HTML을 만들어 클라이언트에게 제공하는 기술로 백엔드 개발자 영역에 속함
Java에서는 JSP와 Thymeleaf가 대표적이다.
동작
1. 서버(WAS)에 HTML을 요청한다.
2. 서버(WAS)에서 로직을 거친 후 DB를 조회한다.
3. 조회 결과를 기반으로 HTML을 동적으로 생성한다.
4. 생성된 HTML을 응답한다.
장단점
장점
1. 초기 페이지 로드 시 서버에서 완전히 렌더링된 HTML을 반환하여 첫 페이지 로딩이 빠름
2. 검색 엔진 크롤러가 완전한 HTML을 즉시 수집할 수 있어 SEO(Search Engine Optimization)에 유리함
단점
1. 모든 요청에 대해 서버가 페이지를 렌더링하므로 높은 트래픽 상황에서 서버의 부하가 클 수 있음
2. 초기 페이지 이외의 페이지들도 렌더링 후 반환되어 속도가 느림
CSR (Client Side Rendering)
웹 브라우저에서 자바스크립트를 사용해 동적으로 HTML을 생성해서 적용하는 기술로 프론트엔드 개발자 영역에 속함.
React, Vue가 대표적이다.
동작
1. HTML을 요청한다. 비어있는 HTML을 응답받는다. JS가 존재하는 주소 링크를 응답한다.
2. 자바스크립트(클라이언트 로직, 렌더링 포함)를 요청한다.
3. HTTP API 요청을 하고 화면에 필요한 데이터를 JSON 형태(JSON이 아니어도됨)로 응답받는다.
장단점
장점
1. 클라이언트 측에서 렌더링하여 사용자 인터랙션에 빠르게 반응함
2. 초기 로딩 후에는 서버의 통신 없이 빠르게 페이지 간 전환이 가능함
단점
1. 초기 로딩 시 필요한 모든 자바스크립트 파일을 다운로드하고 실행해야 하므로, 초기 로딩 시간이 김
2. 검색 엔지 크롤러가 자바스크립트를 제대로 실행하지 못하면 SEO에 불리함
