학습 목표
1. SSR
2. CSR
3. TTV , TTI
들어가면서...
웹 사용간 페이지의 기능 사용시 웹의 전체를 불러오는 비효율적인 방법에서 AJAX라는 SPA(Single Page Application)을 개발하였고 이를통해 웹의 사용성이 높아지게 됩니다.
1. CSR(Client Side Rendring)
- 클라이언트 측에서 모든 작업이 이루어진다
- 사용자가 서버로부터 데이터를 요청
- 서버로부터 index.HTML파일을 받음
- HTML을 비어있으니 다시 서버로부터 필요한 소스코드들을 받아옴
- 이를 기반으로 동적으로 HTML을 생성하여 사용자가 사용할 수 있게함
!)문제점
1. 사용자가 사용할 수 있게 되기까지 시간이 오래걸림
2. 좋지않은 SEO(search engine optimization/검색엔진 기능)
2. SSR(Server Side Rendering)
- 위의 단점들을 보완하고자 클라이언트에서 모든것을 처리하는 방식이 아니다.
- 서버에서 필요한 데어터를 가져와서 HTML파일을 만든다
- 만들어진 HTML파일을 동적으로 제어할수 있는코드와 합친다
- 클라이언트에게 보내진다
- 웹을 사용자가 사용할 수 있게함
이를통해 빠른 웹사용과 효율적인 SEO사용이 가능하다.
!)문제점
1. 서버의 과부하가 걸리기 쉽다.
2. 사용자에게 시각적으로는 빠르게 웹이 보여지나 동적제어를 하는 코드가 다운로드중일경우 웹사용을 위한 일부기능이 제한된다.
3.TTV(Time To View), TTI(Time To Interact)
1. TTV: 사용자가 웹브라우저에서 내용을 볼 수 있는 시점
2. TTI: 사용자가 웹브라우저에서 인터렉션 할 수 있는 시점
CSR 방식
CSR은 TTI와 TTV의 시점이 일치한다.
SSR 방식
SSR은 TTV가 먼저 일어나고 그 뒤에 TTI가 가능해진다.
위 두가지의 경우 사용자가 인터렉션 가능한 시점과 시각적으로 보이는 시점에 차이가 존재한다.
정리
- Use SSR
- SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용한다.
- 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR 이 적합하다.
- 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있다.
- Use CSR
- SEO 가 우선순위가 아닌 경우, CSR을 이용할 수 있다.
- 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공한다.
- 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있다.
느낀점
SSR과 CSR의 사용은 개발자가 판단하여 적절히 사용해야 합니다. 두개의 차이점은 SSR은 서버에서 페이지를 렌더링하고 CSR은 브라우저에서 랜더링한다는 차이점만 있을 뿐이다.
CSR을 자주 사용하는 개발자라면 최종적으로 전해지는 JS파일을 얼마나 효율적으로 보내어 처음에 사용자가 꼭 써야하는 기능만을 넣어 효과적으로 웹을 구동하는것을 초점으로 잡아야할것같다.
SSR을 자주 사용하는 개발자라면 사용자가 시각적으로 보는 시간과 실질적으로 사용가능한 시간의 차이를 줄여 효과적인 웹을 구동토록 고민하여야 겠다.
이게 되네?