<aside> 💻 SSR 알아보기

</aside>

<aside> 📖 CSR ⇒ 비조리형 배달 음식(밀키트 배달), SSR ⇒ 완제품 배달 음식

</aside>

1. CSR 개념

CSR(Client Side Rendering)은 SSR(Server Side Rendering)의 반대, SSR이 서버 측에서 페이지를 렌더링 한다면, CSR은 브라우저(클라이언트)에서 페이지를 렌더링한다.

e.g.

유저가 사이트 접속한다 ⇒ 서버(Apache, Nginx)에서 .html , .css , .js 등 모든 파일을 클라이언트, 즉 사용자의 브라우저로 보낸다. ⇒ 모든 파일을 불러오고 난 후, 유저의 브라우저에서 웹사이트가 렌더링 된다.

2. CSR과정

CSR에서 말하는 브라우저에서의 렌더링은 DOM - Render Tree - Layout - Paint - Render의 과정을 거침, DOM은 HTML이 파싱되면서 나온 객체 모델

CSR의 아이디어는 이 DOM에서부터 시작을 함

1. 기존에 파싱할 HTML을 가장 기초적인 것만 가져가고
2. 나머지는 JS를 이용해서 DOM을 만들고, 만들어진 DOM을 HTML에 덧붙인다.

나머지 HTML은 모두 DOM을 이용해 그리기 때문에 실제 HTML파일 자체의 용량은 낮아지고 다운받는 HTML 자체의 용량은 적어지기 때문에, 페이지를 로딩하는 데에 드는 시간이 줄어들게 된다 하지만 HTML을 기본적인 것만 가져가고 나머지는 전부 DOM을 이용해 그리기 때문에 JS파일이 그만큼 커지게 된다. 따라서 script 태그를 통해 JS파일을 다운로드 해오는 데에 드는 시간이 상대적으로 늘어난다. JS를 사용해 DOM을 직접 만들어 그리기 때문에 DOM만 그때 그때 만들어서 쓰므로 HTML을 다시 불러오지 않고 JS에서 그때마다 DOM을 새로 만들어서 구현한다는 것에 집중할 수 있다.

서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없다. 따라서 javascript를 비활성화 하면 볼 수 있는게 없다.