SSR(Server Side Rendering)
server에서 HTML을 정제해서 브라우저로 전송해 페이지를 띄워주는 방식
특징
server에서 HTML을 완성해서 보내주기 때문에 브라우저에서 우클릭 후 페이지 소스 보기 를 하면 완성된 html을 볼 수 있다.
장점
- 첫 완성된 페이지를 볼 수 있는 속도가 CSR에 비해 빠르다.
- 완성된 html이므로 검색엔진이 사이트의 내용을 파악할 수 있다. => 검색에 용이하다.
단점
- 사용자의 요청에 따라 동적으로 페이지를 변경해주는 속도가 CSR에 비해 느리다.
CSR(Client Side Rendering)
server에서 완성되지 않은 html을 브라우저로 전송하고, 사용자의 요청에 의해 브라우저 단에서 js로 나머지 컴포넌트를 렌더링하는 방식
특징
완성되지 않은 html을 브라우저로 보내주기 때문에 브라우저에서 우클릭 후 페이지 소스 보기 를 하면 미완성된 html을 볼 수 있다. (보통 전송된 html을 보면 <div id="app"></div> 만 있을 확률이 높다.)
장점
- 사용자의 요청에 따라 동적으로 페이지를 변경해주는 속도가 SSR에 비해 빠르다.
단점
- 첫 완성된 페이지를 볼 수 있는 속도가 SSR에 비해 느리다.
- html에
<div id="app"></div>밖에 존재하지 않으므로 검색엔진이 사이트를 검색하기 어렵다.
CSR or SSR을 구현하는 방식은 무엇이 있을까?
CSR
- Ajax를 사용하는 방식
- vanillaJS를 통해 컴포넌트를 rendering 하는 방식
- Angular, React, VueJS 등의 CSR 프레임 워크
SSR
- nodeJS, Spring, Django 등을 통해 완성된 html을 브라우저로 전송하는 방식
위에서 설명드린 방식은 "~~한 방식이면 CSR만 구현할 수 있다"라는 의미가 아니고 " ~~한 방식을 사용하면 CSR을 구현할 수 있다" 라는 의미이다. 예를 들어 nodeJS를 통해 SSR을 하면서 vanillaJS를 통해 CSR을 동시에 할 수 있다.
의문점
Client Server가 따로 존재하면 CSR이다?
React, VueJS 프레임워크를 사용하면 Client Server를 구동하고 CSR 방식을 사용하게 된다. 다만 nodeJS를 통해 Client Server를 구동하고 SSR 방식을 사용할 수도 있다. 따라서 Client Server의 존재 여부와 CSR, SSR 방식은 상관이 없다.
서비스는 CSR 또는 SSR 둘 중 하나만 선택해서 사용할 수 있다?
CSR과 SSR의 장단점이 뚜렷하기에 최근에는 CSR과 SSR을 같이 구현하는 방식을 채택하는 곳도 많다.
React에서는 Next.js, VueJS에서는 Nuxt.js를 사용해 CSR과 더불어 SSR의 기능을 같이 구현하는 방식을 취한다.
참조
