CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이

두 렌더링 방식 중 각 어플리케이션의 구조 또는 서비스 페이지의 특징에 따라 

적절히 사용하는 것이 중요한 것같아 이번 기회에 정리를 했다.

Client Side Rendering

사이트에 접속 -> 브라우저가 서버로부터 인덱스 파일을 받아옴 ->

받아온 인덱스 파일은 비어 있기에 사용자에게는 아무 화면도 보여지지 않음 ->

모든 로직이 담긴 자바스크립트를 요청 -> 동적으로 HTML을 생성할 수 있는 웹 어플리션 로직이 담긴 JS 파일을 받아옴 -> 사용자는 웹사이트가 보여짐

 

이 기술을 활용한 방식으로 SPA가 있다.

페이지가 딱 한개 존재하고 사용자 어떤 행위를 취했을 때 

다른 페이지를 불러오지 않고 자바스크립트를 이용해 사용자가 보고 있는 부분을 DOM의 조작을 통해 변경한다.

 

server side rendering

서버 측에서 HTML을 만들어 클라이언트로 보내주는 것을 말한다.

브라우저에서는 이 HTML를 받고 DOM 트리를 구성하여 그려주기만 하면 끝난다.

 

 

	SSR	CSR
초기 view 로딩 속도	CSR에 비해 렌더링 해야하는 파일이 적어 초기 view 로딩가 빠름	브라우저에서 페이지를 직접 렌더링해야 하므로 초기에는 오래 걸림
SEO (검색엔진최적화)	페이지에 대한 meta 정보가 렌더링 시 이미 포함되어 있기때문에 크롤러봇에서 데이터를 수집해가는데 용이함	렌더링 시 JS파싱, 로딩 및 실행 순서 때문에 크롤러봇이 데이터를 수집하는데 어려움이 있음
보안 문제	사용자에 대한 정보를 서버측에서 Session으로 관리	사용자에 대한 정보를 LocalStorage나 Cookie에서 관리해 XSS 공격에 취약함