CSR vs SSR
현재 우리가 보고 있는 브라우저의 화면은 브라우저 렌더링 과정을 통해 만들어진 것입니다.
어디서 최종적으로 만들어서 보여주느냐, 어떻게 개발하느냐에 따라서 CSR과 SSR 두 가지 방식으로 나뉩니다.
두 방식의 차이를 이해하기 위해서는 SPA와 MPA의 이해가 선행되어야 합니다.
✔ 목표: SPA, MPA의 개념을 이해하고 CSR과 SSR의 차이에 대해 알아봅시다.
SPA와 MPA
- SPA (Single Page Application)
하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션
- MPA (Multiple Page Application)
사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션
한 줄 정리
- SPA: 하나의 HTML 기반으로 JS를 이용해 동적으로 컨텐츠를 바꿈
- MPA: 사용자가 페이지를 요청할 때마다 필요한 요소를 HTML로 파싱해서 컨텐츠를 바꿈
CSR
CSR은 전통적인 방식으로 우리가 흔히 아는 SPA(React, Vue, Angular)가 사용하는 렌더링 방식을 의미합니다.
개념: 브라우저가 서버에 HTML과 JS 파일을 요청한 후, 로드되면 사용자의 상호작용에 따라 JS를 이용하여 동적으로 렌더링을 시킨다.
- 요약: Client가 다 해먹어야 하는 구조 🐽
현실이라면?
🙋 : 샤브샤브 하나 주세요~!
🧑🍳 : 모든 재료 다 줄테니 알아서 먹고 싶은대로 해먹고 추가 재료 필요하면 벨 눌러서 요청하세요 😄
🙋 오! 손님이 입맛대로 먹을 수 있고 계속 점원(서버)에게 요청도 안해도 되고 좋지 않나요?!
👍 물론 CSR은 동적으로 빠르게 렌더링이 되므로 사용자 경험(UX)이 좋고,
서버 요청 횟수가 훨씬 적기 때문에 서버의 부담이 덜하다는 장점도 있습니다.
하지만 수반되는 문제점들도 있습니다!
첫 화면을 보기까지 시간이 오래 걸림
성격 급한 사람들은 첫 로딩시에 화가 날 수 있습니다..🤯
모든 스크립트 파일이 로드될 때까지 기다려야 하기 때문이죠.
- SPA를 사용한 코딩은 요리사가 고객에게 줄 샤브샤브 재료(스크립트 파일)를 만드는 작업입니다.
Q. 만약 그 재료가 너무너무 많으면 어떻게 될까요?
A. 아주 무거워지겠죠..! 그래서 고객에게 갈 때 빠르게 뛰어갈 수 없습니다. - 고객 입장에서는 재료가 도착하기 전까지 그저 빈 테이블을 보고 있을 수 밖에 없습니다.
낮은 SEO 성능
구글이나 네이버 같은 검색 엔진에 내가 만든 웹 페이지를 검색될 수 있게 하려면 어떻게 할까요?
검색 엔진은 모든 웹의 HTML에 있는 타이틀, 태그를 분석해서 판단합니다. 그러나, CSR은 HTML 파일이 아니라 JS가 중심입니다.
따라서 검색 엔진의 검색 봇이 크롤링에 어려움을 겪기 때문에 SEO 성능이 낮아집니다.
SSR
대부분의 웹사이트들은 페이지를 이동할 때마다 서버에 요청을 하는 방식을 채택하고 있는데, 이러한 방식을 SSR이라 부릅니다.
개념: 새로운 페이지로 이동할 때마다, 서버에서 렌더링을 마치고 완전하게 만들어진 HTML 파일을 브라우저로 전달한 후 렌더링 하는 방식
- 요약: 다 준비되기 전에 서버에서 공통 재료(HTML)를 제공해 줌
현실이라면?
🙋 : 만두 샤브샤브 하나 주세요~!
🧑🍳 : (일단 샤브샤브 기본 재료 먼저 줌) 만두는 조금만 기다리세요~
🙋 : (기본 재료 바라보며) 여기 좀 알차게 나오는구만😮
🧑🍳 : 만두 나왔습니다~😄
이전의 CSR의 과정과 다른 점을 알 수 있습니다. 이러한 과정을 수행했을 때 어떤 장단점이 있는지 알아보겠습니다.
빠른 화면 로딩
CSR 처럼 모든 재료를 준비하고 렌더링하는 것이 아니라 공통 재료(HTML 파일)을 먼저 서버에서 제공해주기 때문에
사용자는 그만큼 기다리지 않아도 됩니다.
고객의 테이블이 오래 비어있는 것을 막을 수 있습니다!
향상된 SEO
항상 HTML을 먼저 제공해줌으로써 JS만 리턴받던 CSR보다 HTML의 타이틀, 태그 등으로 검색 엔진에 노출되기 훨씬 쉬워졌습니다.
궁금증
Q: 그렇다면 SSR이 CSR의 단점을 개선했으니 무조건 SSR만 써야 하나요?
A: 애석하게도 모든 기술이 완벽할 순 없습니다..😥 SSR이 가지는 단점 또한 명확합니다.
보이지만 작동하지 않는 기능
SSR은 처음에 HTML 파일만 제공하기 때문에 화면에는 보이지만 실제로 동적인 기능을 수행하기 위해서는 JS 파일을 다운 받아야 합니다.
서버 과부하 위험
- CSR: 요청시 하나의 JS 파일을 리턴하기 때문에 요청 1회로 끝납니다.
- SSR: 페이지 요청시마다 새로고침이 되고, 서버에 매번 요청하기 때문에 서버 부하가 큽니다.
고객이 많으면 기본 재료 주려고 1번, 메인 메뉴 주려고 1번, 계속 가다보면 점원이 사표내는 느낌..😞
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을 수행하여 각 장단점을 보완하는 방식입니다.
웹 페이지의 목적에 따라서 고려하되 CSR과 SSR 중 하나만 선택해서 사용하는건 그렇게 권장할 만한 사항은 아닌 것 같습니다.
