SSR과 CSR

SSR

: 서버에서 필요한 HTML 파일을 만들어 브라우저에 보내는 방식   

서버로부터 완성된 페이지를 받아 화면에 렌더링하는 방식이다. 렌더링 된 페이지를 받아야 하기 때문에 페이지 이동시 깜빡거리는 현상이 발생한다. 하지만 SEO 에 용이하고서 서버에서 필요한 만큼만의 자원을 받기 때문에 네트워크가 느리거나 서버 상태가 좋지 않을 경우 장점을 발휘합니다. 

 

CSR

: 서버에서 내용이 비어있고 JS 가 링크된 HTML 파일을 클라이언트에 보내는 방식

웹사이트에 필요한 모든 데이터를 초기 접속시 한번에 다운로드 받은 뒤 , 그 이후에 필요한 데이터는 서버로 요청하여 클라이언트에서 모든 렌더링을 제어하는 방식이다. 초기 렌더링 속도는 느리지만 이후에는 빠른 렌더링이 가능하다. 초기 페이지 HTML 바디는 비어져 있기때문에 SEO 가 좋지않다. 

 

SSR과 CSR 비교 

SSR 

[장점]

- 정적인 사이트에 적합 

- 처음 진입시 빠른 로딩속도

- 크롤링이 쉽기 때문에 더 나은 SEO가 가능하다

[단점] 

- 서버에 과부하가 걸릴 수 있다. 

- 좋지 않은 사용자 인터랙션 

- 깜빡이는 현상 

 

CSR 

[장점]

- 웹앱에 적합

- 처음 진입 로딩 이후 빠른 속도 

- 뛰어난 사용자 인터랙션 (사용자가 웹사이트를 볼 수 있음과 동시에 인터랙션이 가능하다) 

[단점] 

- SEO에 좋지 않음 

- 초기 로딩 속도가 느릴 수 있다. 

 

SSR과 CSR은 언제 사용해야할까? 

CSR : 서버 상태가 비교적 좋고, 사용자 인터랙션이 많이 일어나는 SPA 서비스에 적합합니다.

SSR: 정적인 사이트 혹은 검색 엔진에 많이 노출되야하는 사이트. 웹사이트가 반복적인 동적 컨텐츠 렌더링을 포함하는 경우 적합합니다.