SSR과 CSR
SSR (Server Side Rendering) : 전통적인 웹 렌더링 방식
서버 측은 클라이언트가 요청하는 특정 html 파일을 제공한다.
그렇기 때문에 브라우저는 JS를 다운로드 하는 중에도 HTML 파일을 보여줄 수 있다.
CSR (Client Side Rendering) : 클라이언트 측에서 렌더링하는 방식
CSR의 index.html을 보면 빈 파일이다.
CSR은 html 파일, JS 파일을 받은 후 JS에서 html을 재구성한다.
이후는 서버에게 html 파일 요청을 할 필요가 없으니 서버에게 HTML 파일을 요청할 필요가 없다.
여러 측면에서 SSR과 CSR 비교
초기 화면 렌더링
SSR이 더 빠르다.
SSR에선 클라이언트가 브라우저를 통해 서버에게 페이지 요청을 하면 서버가 정적 HTML 파일을 제공한다. 이 HTML 파일엔 기본적인 레이어나 Text 처리가 되어있기 때문에, 브라우저가 JS 파일을 다운 받기 전에도 사용자는 화면에 HTML 구성을 볼 수 있다.
CSR은 JS가 html을 재구성해야하기 때문에 HTML 다운로드, JS 다운로드, JS의 처리를 해야한다. 따라서 초기 화면 렌더링이 SSR보다 느리다.
SEO
검색 엔진 최적화 측면에서 SSR이 우수하다.
CSR은 html이 빈 파일이기 때문에, 검색 엔진 봇이 가져갈 수 있는 정보가 한정적이다.
SSR은 클라이언트가 완성된 HTML를 서버에서 직접 받기 때문에 정보가 많다.
서버 부하
SSR의 서버 부하가 더 크다.
SSR에선 요청마다 HTML 코드를 제공해야한다. 따라서 서버 부담이 커진다.
CSR은 클라이언트 측에서 HTML 코드를 재구성하기 때문에 더이상 서버로부터 HTML 파일을 받아오지 않는다. 즉 서버와의 상호작용이 적다.
마무리
SSR과 CSR은 장단점이 명확하고, 서로 상충되는 면이 있다. 이전에 했던 프로젝트 중 Next.js를 사용했는데, Next.js는 SSR과 CSR을 모두 지원한다. 어떻게 그럴 수 있을까? 다음 글에서 알아보겠다.
참고
https://asfirstalways.tistory.com/244
https://d2.naver.com/helloworld/7804182
https://xpectation.tistory.com/155
https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
