django의 장단점을 공부하면서
Server Side Rendering이라는 걸 봤다. 정확히 어떤 개념인지 조사며 공부하다가 여기까지 오게 되었다.
CSR(Client Side Rendering) 란?
서버에서 index.html 파일을 보내주는데 이 파일은 비어 있다.
링크된 자바스크립트를 서버로 부터 받게 되는데 application에서 필요한 로직뿐만 아니라 필요한 프레임워크와 라이브러리의 소스코드들도 다 포함이 되어있다.
추가로 필요한 데이터는 서버에서 요청해서 받아온 다음에 이것들을 기반으로 동적 html을 생성해 사용자에게 최종적인 애플리케이션을 보여준다.
😕단점
사용자가 첫화면을 보기까지 오래 걸린다.
검색엔진이 웹페이지 분석하기 어렵다.
LOW SEO(Search Engine Optimization)
구글, 네이버와 같은 검색엔진들은 서버에 등록된 웹사이트를 하나하나씩 돌아다니며 웹사이트의 html문서를 분석
우리가 검색할 때 웹사이트를 빠르게 검색할 수 있게 도와준다.
CSR에서 사용하는 html바디는 대부분 비어져 있어 검색엔진이 웹페이지를 분석하기 어려움
SSR(Server Side Rendering) 란?
웹사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 html 파일을 만듦
동적으로 조금 제어할 수 있는 소스코드와 함께 클라이언트에 보내준다.
CSR을 사용할 때보다 첫번째 페이지 로딩이 빨라짐
모든 컨텐츠가 html에 담겨 있어 효율적인 SEO를 할 수 있다.
😕단점
페이지를 로딩할때 깜박임 이슈가 존재 좋지 않은 user experience가 있다.
서버에 과부화걸리기 쉽다.
사용자가 빠르게 웹사이트를 사용할 수 있지만 동적으로 데이터를 처리하는 js를 아직 다운로드받지 못해서 여기저기 클릭했는데 반응이 없는 경우가 발생
TTV : Time To View
TTI : Time To Interact
CSR은 TTV사용자가 웹사이트를 볼 수 있음과 동시에 TTI 클릭 등 인터랙션이 가능
CSR은 효율적으로 많이 분할해서 첫 번째로 사용자가 보기위해 정말 필수적인 아이만 보낼 수 있을지 고민
SSR은 js파일을 받아오지 않으면 클릭해도 아무것도 처리할 수 없다. TTV와 TTI의 시간의 단차가 있다.
TTI와 TTV의 시간의 단차를 줄이기 위해서 어떤 노력을 할 수 있을지, 매끄러운 UI와 UX를 제공할 수 있을지 고민
SSG(Static Site Generation) 란?
CSR에 특화된 라이브러리이지만 개츠비라는 라이브러리를 함께 사용하면 리액트로 만든 웹 애플리케이션을 정적으로 웹페이지를 미리 생성해둬 서버에 배포해 놓을 수 있다.
모두 정적은 아니다 추가적으로 데이터를 받아오거나 동적으로 처리해야하는 로직이 있다면 js파일을 가지고 있을 수 있기 때문에 동적인 요소도 충분히 추가할 수 있다.
출처