CSR(Client Side Rendering)
출처 : The Benefits of Server Side Rendering Over Client Side Rendering
CSR의 동작 순서
1. 서버가 브라우저로 응답을 받았을 때에는 비어있는 HTML(root만 있는 상태)로 온다.
2. 브라우저가 JS파일을 다운받는다
3. JS파일을 해석하고 실행한다.
4. 이제 페이지를 보고 상호작용할 수 있다. (TTV & TTI)
CSR은 client side rendering 약자로 자바스크립트 파일을 브라우저에서 해석해 랜더링하는 방식이다.
이후 사용자의 상호작용에 따라서 동적으로 랜더링하며, 필요에 따라 데이터를 서버에서 요청해서 받아온다.
- 장점
1. 첫 로딩 이후에는, 상호작용시 동적으로 필요한 부분을 랜더링하기 때문에 페이지를 통째로 바꾸는 SSR에 비해 UX가 좋다.
2. 서버에 요청하는 횟수가 적어서 서버 부담이 덜하다.
3. 일단 화면에 보여지면, 바로 상호작용할 수 있다. (TTV와 TTI가 같다.) - 단점
1. 첫 랜더링시, 모든 파일을 다운로드 받고 실행해야 되기 때문에, SSR방식에 비해 시간이 오래걸릴 수 있다.
2. SEO(검색엔진 최적화)가 잘 안될 수 있다. 대부분의 CSR방식의 사이트는 HTML문서를 보면 정보가 거의 없기(body에 있는 root가 전부) 떄문에 크롤링 봇이 정보를 추적하기가 불편하다. (prerenderIO 등으로 일부 해결 가능)
SSR(Server Side Rendering)
출처 : The Benefits of Server Side Rendering Over Client Side Rendering
SSR의 동작 순서
1. 서버로부터 랜더링될 수 있는 HTML을 받는다.
2. 브라우저가 HTML을 랜더링 하고, JS파일을 다운받는다. (TTV)
3. JS파일을 해석하고 실행한다.
4. 이제 페이지를 보고 상호작용할 수 있다. (TTI)
SSR은 Server Side Rendering 약자로 완전하게 만들어진 HTML을 받은 뒤에 화면에 먼저 보여주고, JS파일을 실행하는 방식을 서버 사이드 랜더링이라고 한다. 이후 상호작용을 하면, 서버에 새로운 페이지를 요청하는 방식으로 새로고침이 일어난다.
- 장점
1. 초기 로딩이 빨라서 사용자가 컨텐츠를 빨리 볼 수 있다. (TTV 빠름)
2. 완성된 HTML이기 때문에 SEO(검색엔진 최적화)가 가능하다. (크롤링 봇이 사이트를 인식하기가 더 수월하기 때문) - 단점
1. 상호작용 시, 매번 새로운 페이지가 새로고침 되기 때문에 블링크 현상이 일어난다.
2. 서버 요청 횟수가 증가함에 따라 서버 부하가 커진다.
3. TTV와 TTI의 단차로 인해 화면은 보이지만 상호작용할 수 없는 상태가 있어, UX적으로 좋지 않을 수 있다.
