SSR vs CSR

Browser에서 실제로 우리가 보는 화면을 어디서 최종적으로 만들어서 보여주는가 , 어떻게 개발하는가에 따라서 CSR, SSR로 나뉜다.

CSR(Client Side Rendering)

처음 웹서버를 요청할 때 데이터가 없는 문서를 반환한다.

HTML 및 static 파일들이 로드 되어서 데이터가 있다면, 데이터 또한 서버에 요청하고 그것이 화면상에 보여지게 된다.

Browser가 서버에 HTML과 static파일을 요청한 후 로드되면 사용자의 상호작용에 따라서 javascript를 통해 동적으로 렌더링한다. 필요에 따라 데이터를 서버에 요청해서 받아와 렌더링한다.

• 장점

1. 첫 로딩에 HTML과 static파일들만 다 받으면, 동적으로 빠르게 렌더링 하므로 사용자 UX가 뛰어나다.

2. 서버에 요청하는 횟수가 훨씬 적으므로 서버 부담이 적다.

• 단점

1. 모든 HTML과 static파일들이 로드될 때 까지 기다려야 한다

2. 검색엔진 최적화(SEO)문제가 발생할 수 있다.

SSR(Server Side Rendering)

완전하게 만들어진 HTML파일을 받아오고 렌더링 한다. 웹 서버에 요청할 때 마다 Browser의 새로고침이 일어나고 서버에 새로운 페이지에 대한 요청을 하는 방식이다.

• 장점

1. 초기 로딩 속도가 빠르므로 사용자가 컨텐츠를 빨리 볼 수 있다.

2. 모든 검색엔진에 대해 검색엔진 최적화(SEO)가 가능하다

• 단점

1. 매번 페이지를 요청할 때 마다 새로고침 되므로 사용자 UX가 떨어진다

2. 서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다.

CSR vs SSR 비교그림