CSR (클라이언트 사이드 랜더링)

1. 동작원리

• 클라이언트가 URL을 요청합니다.

• 서버가 요청을 받고 필요한 파일들을 전달합니다. (html, css, javascript 파일들을 전달)

• 브라우저는 파일들을 받은 뒤, html 파일을 파싱합니다.

• 브라우저는 html 파일 내부의 javascript 파일을 실행합니다.

• 자바스크립트가 실행되어 DOM 트리를 생성합니다.

• CSS 파일들을 로드하여 스타일을 적용합니다.

• DOM 트리와 스타일이 적용된 페이지를 브라우저에 표시합니다.

2. 장점

• 페이지 내용이 새로운 데이터로 변경되는 경우, 클라이언트에서 자바스크립트가 실행되어 페이지를 바로 변경하므로 페이지 변경이 빠릅니다.

• 또한 랜더링 과정을 브라우저에서 진행하므로 서버 부담이 줄어듭니다.

• 랜더링 된 데이터를 주고 받는게 아니라, 필요한 데이터만 주고 받게 되므로 네트워크 부담도 줄어듭니다.

3. 단점

• URL 요청시, 필요한 파일들을 모두 다운받으므로, 첫 실행시 로드 속도가 느립니다.

• 브라우저 내에서 자바스크립트가 실행되므로, 보안 문제가 있습니다. 자바스크립트를 실행하여 쿠키, 토큰 등을 탈취할 수 있습니다.

• 검색 엔진 최적화 (SEO) 에 불리합니다. CSR 로 실행되었을 때 초기 html 문서에는 페이지의 데이터들이 들어있지 않고, 자바스크립트가 실행되면서 데이터를 동적으로 집어넣는 형태이기 때문입니다. (검색 엔진은 보통 html 문서에서 내용들을 읽어내는데, CSR 로 실행된 페이지는 내용이 텅텅 비어있습ㅣ다.)