현재 우리가 보고 있는 브라우저의 화면은 브라우저 렌더링 과정을 통해 만들어진 것이다.
어디서 최종적으로 만들어서 보여주느냐 그리고 어떻게 개발하느냐에 따라서 CSR과 SSR 두 가지 방식으로 나뉘게 된다.
두 방식의 차이를 이해하기 위해서는 SPA와 MPA의 이해가 선행되어야 한다.
✔ 목표: SPA, MPA의 개념을 이해하고 CSR과 SSR의 차이에 대해 알아보자.
SPA와 MPA
-
SPA(Single Page Application)
하나의 HTML을 기반으로JS를 이용해동적으로 컨텐츠를 바꾸는웹 어플리케이션 -
MPA(Multiple Page Application)
사용자가페이지를 요청할 때마다필요한 요소를 HTML로 파싱해서컨텐츠를 바꾸는웹 어플리케이션
CSR
CSR은 전통적인 방식으로 우리가 흔히 아는 SPA(React, Angular, Vue)가 사용하는 렌더링 방식을 의미합니다.
CSR: 브라우저가 서버에 HTML과 JS 파일을 요청한 후, 로드되면 사용자의 상호작용에 따라 JS를 이용하여 동적으로 렌더링을 시킨다.
비유를 하자면, 샤브샤브 집에서 모든 재료를 한 번에 주고 사용자의 입맛대로 조리해 먹는 방식입니다.
👍 장점
- 동적으로 빠르게 렌더링 되기 때문에 사용자 경험(UX)이 좋다.
- 서버 요청 횟수가 적기 때문에 서버의 부담이 덜하다.
👎 단점
- 첫 화면을 보기까지 오랜 시간이 걸림
모든 스크립트 파일이 로드 될 때까지 기다려야 하기 때문 - 낮은 SEO 성능
검색 엔진은 HTML에 있는 태그 등을 분석하지만, CSR은 JS 중심이기 때문에 검색 봇이 크롤링에 어려움을 겪음
SSR
페이지를 이동할 때마다 서버에 요청을 하는 방식을 SSR이라고 부른다.
SSR: 새로운 페이지로 이동할 때마다 서버에서 렌더링을 마치고, 완전하게 만들어진 HTML 파일을 브라우저로 전달한 후 렌더링 하는 방식
비유하자면, 샤브샤브 집에서 기본 재료를 먼저 주고, 사용자가 벨을 누를 때마다 새로운 재료를 주는 방식입니다.
👍 장점
-
빠른 화면 로딩
CSR처럼 모든 재료를 준비하고 렌더링하는 것이 아니라 기본 재료(HTML 파일)을 먼저 서버에서 제공해주기 때문에 사용자가 그만큼 기다리지 않아도 된다 -
향상된 SEO
JS만 리턴받던 CSR보다 HTML의 타이틀, 태그 등으로 검색 엔진에 노출되기 훨씬 쉬워짐
👎 단점
-
보이지만 작동하지 않는 기능
SSR은 처음에 HTML 파일만 제공하기 때문에 화면에는 보이지만, 실제로 동적인 기능을 수행하기 위해서는 JS 파일을 다운 받은 상태여야 한다. -
서버 과부하 위험
페이지 요청 시마다 새로고침이 되고, 서버에 파일을 요청하기 때문에 서버 부하가 크다.
CSR vs SSR 그래서 뭘 쓰는게 좋은가요?
보통 React, Vue와 같은 SPA를 사용하면서 CSR과 SSR을 고민하게 되는 이유는 SEO 때문이다.
회사 내에서만 사용하는 CMS라면 신경쓸 필요가 없지만, 일반 사용자에게 검색되어야 하는 사이트라면 SEO 때문에 SSR를 고려하게 된다.
하지만 기쁜 소식은 구글의 경우 크롤러 내부에 JS 엔진이 있어서 CSR 방식으로도 SEO 측면에서 크게 문제되는 것이 없다. (👼 구글 갓)
하지만 네이버와 다음과 같은 JS 엔진이 없는 포털 사이트는 다르다.
이를 해결하기 위해 SSR with Hydration 기법이 등장했다. 대표적으로는 React의 Next.js와 Vue의 Nuxt.js가 위 기법을 구현한 프레임 워크이다.
처음엔 SSR을 수행하고 그 후 다른 페이지들에서는 CSR을 수행하여 각 장단점을 보완하는 방식을 따른다.
웹 페이지의 목적에 따라서 고려해야겠지만, 많은 기업에서 SEO를 중요시하기 때문에 CSR과 SSR을 모두 유연하게 다룰 줄 아는 능력이 필요하다고 생각된다.
