CSR 와 SSR
"사용자의 요청에 응답하여 동적 웹페이지를 생성하는 리소스와 로직을 어디에서 어떻게 처리하는가?" 에 따라 CSR과 SSR로 구분할 수 있다.
SSR은 서버 사이드 렌더링(Server Side Rendering)의 약자로서 서버측면의 렌더링을 의미한다. SSR은 사용자의 요청을 클라이언트에서 서버로 전달하여 서버에 저장되어 있는 리소스를 바탕으로 로직을 처리하여 웹페이지를 생성할 수 있는 리소스를 전달한다.
반면, CSR은 웹페이지를 생성할수 있는 리소스를 서버로부터 모두 받아온 후 사용자의 요청이 있을시 클라이언트 차원에서 처리하여 웹페이지 리소스를 생성한다.
TTV (Time To View) : 웹페이지가 화면에 처음 등장하는 시간
TTI (Timew To Interact) : 웹 페이지의 다양한 UI와 상호작용 가능하게 하는 시간
CSR (Client Side Rendering)
출처: The Benefits of Server Side Rendering Over Client Side Rendering
- 웹 사이트에 최초 접속 시 브라우저가 서버로 웹페이지를 생성할 수 있는 리소스를 모두 요청한다.
- 서버는 요청받은 리소스들을 모두 전송하고 브라우저는 전송받은 리소스들을 처리하여 시각적으로 그린다.
- JS를 이용하여 HTML와 CSS를 조작하기에 시각적으로 보여주는 동시에 UI요소와 상호작용가능하다. (즉, TTV = TTL)
단점
- 초기에 모든 리소스를 받아오기에 사용자가 빈 화면을 보는 시간이 오래걸릴 수 있다.
- HTML 요소가 빈약하기에 SEO(Search Engine Optimization)이 좋지 않다.
SSR (server side rendering)
출처: The Benefits of Server Side Rendering Over Client Side Rendering
- 사용자 요청시 서버에서 HTML을 동적으로 생산하여 클라이언트로 전송하기에 바로 화면에 웹페이지가 나타난다.
- 첫번쨰 페이즈를 로딩하는 데 필요한 데이터만 전송하기에 CSR보다 TTV가 빨라진다.
- 모든 컨텐츠가 HTML에 포함되어 있기에 더 낳은 SEO가 가능하다.
단점
- 사용자의 요청이 많아질수록 서버가 하는 역할이 비대해져 과부하가 올 수 있다.
- 화면에 시각적으로는 표현되었지만 상호작용 가능하게 하는 JS파일을 로드하지 못했다면 UI조작이 되지 않아 좋지않은 사용자 경험을 제공할 수 있다.
