[SSR] SSR vs CSR

웹 브라우저의 렌더링 방식은 SSR, CSR 이 있습니다. 두 방식에 특징 및 장단점에 대한 내용을 정리하였습니다.

 

1. SSR

SSR은 Server Side Rendering의 약자로, 웹 페이지의 내용을 서버에서 모두 구성한 뒤 클라이언트로 보내주는 방식입니다. SSR의 특징은 초기 렌더링이 빠르고 SEO (Search Engine Optimization) 최적화에 대한 장점이 있습니다. 대규모 웹 어플리케이션의 초기 렌더링 속도문제를 SSR로 개선할 수 있습니다. 하지만 추가 페이지를 로드할 경우 서버에 Request를 보내는 Cycle을 반복하여 전환 시 화면 깜빡임 문제, 서버 과부하 문제 및 로드 시간이 소요되는 단점이 있습니다. 

2. CSR

CSR은 Client Side Rendering의 약자로, 웹 페이지의 콘텐츠의 렌더링을 클라이언트 측에서 Javascript 코드가 실행되어 동적으로 렌더링하는 방식입니다. 따라서 최초 로드 시 모든 HTML, CSS, JAVSCRIPT를 한번에 로드한 다음 complie하여 사용하기 때문에 첫 페이지 로드 시간이 SSR보다 상대적으로 길지만, 추가 페이지 로드 시에는 이미 준비된 스크립트를 실행하여 DOM에 즉시 렌더링하는 방식으로 인해 추가 페이지 로드에는 더 효율적입니다. 단점으로는 동적인 웹 페이지 생성으로 인해 검색엔진 데이터 수집이 어려워 SEO에 불리했지만, 최신 검색엔진은 Javascript 크롤링이 가능하여 SEO를 위한 SSR 도입의 필요성이 상대적으로 줄어 들었습니다. 

 

 

 

 

참고사이트
https://d2.naver.com/helloworld/7804182

https://helloinyong.tistory.com/308

https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8