💡새롭게 알게 된 것
- SPA (single-page application) : 싱글 페이지 어플리케이션
- SSR (server-side rendering) : 서버 측 렌더링
- CSR (Client-Side Rendering) : 클라이언트 측 렌더링
현재 vanilla-JS을 배우며 작성하는 코드들의 특징은 클라이언트 측 에서 렌더링(CSR) 된다는 점이다. 각 컴포넌트들을 JS 모듈로 작성하고, 각 컴포넌트의 상태의 변화에 따라 컴포넌트 및 페이지를 동적으로 렌더링을 한다.
그렇다면 이 'CSR란 방식은 왜 사용되게 된 걸까?' 에 대해 로토님이 설명해 주신 내용을 다시 한번 정리하며, 각 개념에 대해 더 알아보자!
일반적인 정적 웹페이지 + SSR
html파일들로 페이지가 구성된다.- url이 파일 경로와 이름이 된다.
- 새로고침처럼 매번
<html>~</html>전체를 렌더링 한다.
web application + SSR
위 방식을 바탕으로 서버에서 일부 html과 js만 브라우저로 전달하고,
동작을 js를 통해 하다보니 렌더링 시점이 섞이는 문제가 발생한다.
또한 웹앱의 발전에 따라 유저와의 인터렉션이 점점 증가하며 이러한 많은 처리들을 서버에서 모두 할 수 없게 되며, 클라이언트 측에서 처리하는 방식을 사용하게 된다.
single-page application + CSR
서버는 단지 API를 이용해 JSON 파일 등을 보내주고, html의 렌더링은 자바스크립트를 통해 클라이언트 측에서 수행하는 Client-Side Rendering 방식이 사용되게 된다.
- 클라이언트에서는
html파일은index.html하나만 존재한다. - 클라이언트로 오는 모든 url요청을
index.html로 돌린다. - 이 후의 동작은 url을 보고, 어떤 페이지를 그릴지 동적으로 처리한다.
위 처럼 주소에 따라 다른 뷰를 렌더링하는 것을 라우팅(routing)이라고 한다.
이처럼 single-page application은 하나의 ndex.html파일을 가지지만, 한 종류의 화면 (하나의 주소)만을 가지는 것은 아니다!
SSR과 CSR의 장단점
SSR의 장점 👍
- 검색엔진최적화(SEO)가 가능하다.
- 렌더링 된
html이 클라이언트에게 바로 전달되기 때문에 초기로딩속도를 줄일 수 있다. html이 먼저 로딩된 후js파일을 불러오기 때문에, 렌더링이 모두 완료되기 전에 사용자가html로 로딩된 화면을 먼저 이용할 수 있다.
SSR의 단점 👎
- 새로고침처럼 매번 전체페이지를 랜더링하는 방식으로 필요없는 부분을 포함하여 전체페이지를 갱신하게 된다.
CSR의 장점 👍
- 필요한, 변경된 데이터만 받아 부분적으로 렌더링을 하기 때문에 트래픽이 감소한다.
- 새로고침(깜빡임)이 발생하지 않아 유저에게 네이티브 앱과 비슷한 사용경험을 줄 수 있다.
CSR의 단점 👎
- 초기 구동 속도가 느리다.
html과js의 로딩,js의 렌더링이 모두 끝나야 유저가 화면을 볼수 있다. ( 초기구동 이후에는 빠른 인터렉션을 보인다. ) - 검색엔진최적화 문제가 발생할 수 있다. 대부분 웹 크롤러 봇들은 JavaScript파일을 실행시키지 못하기 때문에 HTML에서만 콘텐츠들을 수집하게 되고 CSR페이지를 빈 페이지로 인식하게 된다.
- 보안 문제가 발생할 수 있다. SSR은 사용자 정보를 서버 측에서 세션으로 관리를 하지만, CSR은 쿠키 말고는 사용자 정보를 저장할 공간이 마땅치 않다.
결론
사진출저 | https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=ko
위 사진의 넓은 스펙트럼처럼 서비스에 따라 그에 맞는 SSR과 CSR를 적절히 활용하면 된다. 또는 UX에 지장이 가지 않는 선에서 페이지를 나누어 SSR과 CSR의 방식 모두 구성하는 방법도 있다. 이 부분은 조금 더 공부해봐야 할 것 같다 :)
[참고 개념] 렌더링
웹페이지 접속 시, 웹 페이지 및 구성 요소(컴포넌트) 등을 브라우저에 그려주는 것.
- 서버로부터 데이터를 응답받아 HTML을 Parsing 하여 DOM트리를 생성한다.
- DOM트리가 구축되는 동안 브라우저는 Render트리를 구축한다.
- CSS설정 및 위치를 설정한다.
- Render트리가 그려지고 브라우저 화면에 표시된다.
💭느낀점
이전에 구현해본 웹앱이 CSR이 였는데, JS가 동적으로 클라이언트 측에서 렌더링에 관여하는 것을 당연하게(?) 생각하고 차이점을 잘 인지하지 못했다. (이것은 내가 SSR방식을 많이 사용해 보지 않은 이유도 있는 것 같다.😸)오늘 수업을 들으며 왜 CSR 방식이 나오게 되었는지에 배경에 대해 이해하며 CSR과 SSR 방식의 차이를 좀 더 깊게 알아볼 수 있었던 기회였다.
내일부터 개인 프로젝트 시작이다...
걱정이 조금 되기는 하지만! 그래도 데브코스에서의 플젝인 만큼 열심히!
좋은 성과와 성장을 이루고 싶다 :)
참고
데브코스
https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=ko
https://ivorycode.tistory.com/entry/SSRSever-Side-Rendering%EA%B3%BC-CSRClient-Side-Rendering
